동적으로 생성 된 행 내에서 .change() 실행

Question

내 페이지에서 두 개의 스크립트가 실행되고 데이터가 테이블 내에 보관됩니다.

1) 버튼 클릭 - 함수 addRownew - 선택 행과 입력란이 포함 된 테이블에 새로운 행을 추가합니다.

2) 선택 상자는

두 스크립트 확인 작업)을 입력 상자에 값을 전달합니다 변경 (출력이 로그인 할 때 따로 보관 할 때 의도 한대로하는 스크립트를 가지고,하지만 난 .change를 사용할 때 함수가 동적으로 생성 된 행 내에서 발생해도 아무 일도 일어나지 않습니다.

$(document).ready(function() 
{ 
$(".productcode").change(function() { 

console.log ('log onchange') 
var result= $(this).val(); 
alert(result); 

$('#unit_cost').val($('.productcode').val()); 
}); 

}); 

그리고 PHP 테이블 :

<TABLE id="dataTable" border="0"> 

<TR style="display:none;"> 
<TD width="5%" align="left"><INPUT type="checkbox" name="chk2"/></TD> 
<TD width="150" align="left"><INPUT name="furn_id[]" type="hidden" value="0"/><INPUT name="furn_item[]" type="text" /></TD> 
<TD width="150" align="left">&nbsp;<select name="furn_room[]" multiple="MULTIPLE" > 
<?php 
$query=mysql_query("SELECT room FROM dbRooms ORDER BY room"); 
while($entry=mysql_fetch_array($query)) { 
echo '<option value="' . $entry['room'] . '">' . $entry['room'] . '</option>'; 
} ?> 
</select></TD> 
<TD width="250" align="left">&nbsp;<select name="furn_room[]" id="productcode" class="productcode" > 
<option value="" ></option> 
<?php $query=mysql_query("SELECT * FROM dbProducts ORDER BY product_name"); 
while($entry=mysql_fetch_array($query)) { 
echo '<option value="' . $entry['product_code'] . ' - ' . $entry['product_name'] . ',' . $entry['product_unit'] . '">' . $entry['product_code'] . ' - ' . $entry['product_name'] . '</option>'; 
} ?> 
</select></TD> 
<TD width="50" align="left">&nbsp;<INPUT name="furn_qty[]2" type="text" value="" size="2"/>  <select name="furn_room[]" > 
<?php $query=mysql_query("SELECT * FROM dbSizeOptions order by id"); 
while($entry=mysql_fetch_array($query)) { 
echo '<option value="' . $entry['size'] . '">' . $entry['size'] . '</option>'; } ?> 
</select></TD> 
<TD align="left">&nbsp;<INPUT name="furn_qty[]" type="text" value="" size="2"/></TD> 
<TD width="50" align="left" valign="middle">&nbsp;<INPUT name="furn_cost[]" type="text" value="" size="5"/></TD> 
<TD width="50" align="left" valign="middle">&pound;<INPUT name="unit_cost[]" id="unit_cost" class="unit_cost" type="text" value="" size="5"/></TD> 
<TD width="50" align="left" valign="middle">&pound;<INPUT name="furn_cost[]" type="text" value="" size="5"/></TD> 
</TR> 
</TABLE> 

Answer 1

사용 이벤트 위임 :

$('#dataTable').on('change', '.productcode', function(){ 
    // code 
}); 

함수에 대한 나의 스크립트는 변경

function addRownew(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var colCount = table.rows[0].cells.length; 

     for(var i=0; i<colCount; i++) { 

      var newcell = row.insertCell(i); 

      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      //alert(newcell.childNodes); 
      newcell.childNodes[0].value = rowCount; 
     } 
    } 

스크립트를 addRownew