jquery 로 입력추가 후 ...
관련링크
본문
링크페이지에서 '영역'을 클릭하면 아래에 jquery로 입력창이 하나씩 생기도록 했습니다.
그런데 새로 생긴 입력창에 '영역'을 클릭하면 input의 배경색이 노란색으로 나와야하는데 그렇지 안네요..
jquery 로 새로 추가한 input 의 아이디 값을 못불러오는것 같습니다..
어떻게 하면 될까요? 고수님들 조언부탁드립니다.
아래는 그 소스 입니다.
<style>
#Gubun_Div {padding:5px;}
#Gubun_Div .title{display:inline-block;text-align:center;font:bold 11px Dotum;padding:0px 10px;}
#Gubun_Div .cont{color:#FF0000;float:right;font:normal 11px Dotum;}
#Item_Div {overflow:hidden;padding:4px 0px 2px 0px;}
#Item_List input {font:normal 18px dotum;height:30px;}
#Item_List .Local {width:98%;border:1px solid #DEDEDE;text-align:left;background-color:#FFF;padding:0px 5px 0px 0px;position: relative;margin-bottom:10px;}
#Item_List .Local input{padding:0px 0px 0px 5px;margin:0px;width:100%;border:0px solid #DEDEDE;text-align:left;}
#Item_List .Content {width:98%;border:1px solid #DEDEDE;text-align:left;background-color:#FFF;padding:0px 5px 0px 0px;position: relative;margin-bottom:10px;}
#Item_List .Content textarea{width:99%; padding:4px 2px 4px 6px;word-break:break-all;height:50px;line-height:200%;font:normal 14px Dotum;}
#Item_List {padding:10px;position: relative;margin-bottom:30px;background-color:#F4F4F4;border:1px solid #CCC;}
#Bottom {overflow:hidden;margin:4px 0px;width:<?=$notmobilewidth?>;text-align:center;height:60px;}
#Bottom #Save_Mess {overflow:hidden;position: absolute;width:100%;left:0px;top:0px;padding:6px 0px;background-color:#E7E7E7;color:#A2A2A2;}
#Bottom .Submit {width:60px;padding:6px 0px;margin:0px auto;text-align:center;border:0px;background-color:#FF5200;color:#fff;font:bold 12px dotum;cursor:pointer;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.FocusBox {margin:0; height:21px; color:#666;background-color:#FFFFDD;}
.InputName {position:absolute;left:6px; top:11px;color:#999;cursor:text;font: normal 11px Dotum;}
.InputBox {height:32px;padding:0px 5px 0px 6px;border:0px solid #FFF;font:normal 11px Dotum;margin-left:0px;}
</style>
<div id="Gubun_Div">
<span class="title">의견</span>
<span class="cont">참고 사항</span>
</div>
<div style="height:4px;font-size:1px;"> </div>
<form name="fwrite" method="post" onsubmit="return Item_Submit(this);" enctype="multipart/form-data" style="margin:0px;">
<div id="Item_Div">
<?
$InfoLocalText = "영역";
$InfoContText = "내용";
?>
<input type="hidden" name="NumCount" id="NumCount" value="1">
<div id="Item_List">
<input type="hidden" name="item_no" value="">
<div class="Local">
<label for="item_local1" class="InputName"><?=$InfoLocalText?></label>
<input type="text" name="item_local1" id="item_local1" class="item_local1 InputBox" value="" onfocus="return Item_Add();">
</div>
<div class="Content">
<label for="Op_Cont1" class="InputName"><?=$InfoContText?></label>
<textarea id="Op_Cont1" name="Op_Cont1" class="Op_Cont1 InputBox"></textarea>
</div>
</div>
</div>
<div id="Bottom">
<input class="Submit" type="Submit" value=" 저 장 " accesskey='s'>
</div>
<div id="Message"></div>
</form>
<script type="text/javascript">
$(function() {
var $msBoxInp = $('.InputBox');
$msBoxInp.each(function() {
var $this = $(this);
var thisId = $(this).attr('id');
var $msBoxLbl = $("label[for='"+thisId+"']");
if ($this.attr('value') == "") $msBoxLbl.css("display","block");
else $msBoxLbl.css("display","none");
});
$msBoxInp.focus(function() {
var $this = $(this);
var thisId = $(this).attr('id');
var $msBoxLbl = $("."+thisId);
if ($this.attr('value') == "") $msBoxLbl.addClass("FocusBox");
});
$msBoxInp.keydown(function() {
var $this = $(this);
var thisId = $(this).attr('id');
var $msBoxLbl = $("label[for='"+thisId+"']");
if ($this.attr('value') == "") $("."+thisId).addClass("FocusBox");
else $msBoxLbl.css("display","none");
});
$msBoxInp.change(function() {
var $this = $(this);
var thisId = $(this).attr('id');
var $msBoxLbl = $("label[for='"+thisId+"']");
if ($this.attr('value') == "") $("."+thisId).addClass("FocusBox");
else $msBoxLbl.css("display","none");
});
$msBoxInp.blur(function() {
var $this = $(this);
var thisId = $(this).attr('id');
var $msBoxLbl = $("label[for='"+thisId+"']");
if ($this.attr('value') == "") {$msBoxLbl.css("display","block"); $("."+thisId).removeClass("FocusBox");}
});
});
function Item_Add() {
$(".Local input").attr("onfocus",""); // 입력필드 추가하는 소스 제거
var NumCount = parseInt($("#NumCount").val()) + 1;
var TEXT = "<div id='Item_List'><input type='hidden' name='item_no' value=''><div class='Local'><label for='item_local"+NumCount+"' class='InputName'><?=$InfoLocalText?></label><input type='text' name='item_local"+NumCount+"' id='item_local"+NumCount+"' class='item_local"+NumCount+" InputBox' value='' onfocus='return Item_Add();'></div><div class='Content'><label for='Op_Cont"+NumCount+"' class='InputName'><?=$InfoContText?></label><textarea id='Op_Cont"+NumCount+"' name='Op_Cont"+NumCount+"' class='Op_Cont"+NumCount+" InputBox'></textarea></div></div>";
$("#Item_Div").append(TEXT);
$("#NumCount").val(NumCount);
return false;
}
function Item_Submit() {
alert("중비중");
/*
$.ajax({
type: "POST",
url: "./update.php",
data: "no="+Item_no+"&name="+Item_name+"&pay="+Item_pay+"&cnt="+Item_cnt,
success: function(msg){
$("#Message").html(msg);
$("#Bottom").prepend("<div id='Save_Mess'>저장완료</div>");
$("#Save_Mess").delay('1000').fadeOut('slow');
}
});
*/
return false;
}
</script>
답변 1
Element 가 생성되기 전에 아래와 같이 var $msBoxInp 가 지정되어서 추가되는 부분은 인식이 안되는부분입니다. 해당 박스부분에 onfocus로 처리하는게 좋겠네요.
$(function() {
var $msBoxInp = $('.InputBox');