jquery 로 입력추가 후 ...

jquery 로 입력추가 후 ...

QA

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');

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT