Question

我的页面上运行了两个脚本，我的数据保存在表格中。

1）按钮单击 - 函数addRownew - 这会在包含选择框和输入框的表中添加一个新行。

2）选择框有一个脚本，当更改时会将值传递到输入框（并输出到日志）

两个脚本在保持分开时可以正常工作，但是当我在动态创建的行中使用.change函数时，没有任何反应 - 甚至不是日志。

我的函数addRownew

的脚本

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;
        }
    }

改变的脚本：

 $(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
});

从动态创建的行中运行.change（）

1 个答案: