当我使用 HTML 创建复选框时，操作会正常触发，但是当我使用 javascript 创建复选框时出现问题(当我在带有按钮的表中添加一行并单击新复选框时)操作不起作用。
这是我的代码:
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<SCRIPT>
$(window).load(function() {
$('input[name=chk]').change(function() {
if ($('input[name=chk]').is(':checked')) {
alert("checked");
}
else {
alert("unchecked");
}
});
});
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.setAttribute("name","chk");
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
谢谢
最佳答案
那是因为你的事件处理程序:
$('input[name=chk]').change(function() { ... });
...仅适用于当时与选择器匹配的那些输入 - 在动态创建的输入存在之前。您可以改为使用附加到父元素(或文档)的委托(delegate)事件处理程序，该处理程序在事件发生时检查选择器:
$('#dataTable').on('change', 'input[name=chk]', function() { ... });
.on() method已在版本 1.7 中添加，因此如果您使用旧版本的 jQuery，请使用 .delegate()反而。 (除非您使用非常旧版本，即 1.4.2 之前的版本，在这种情况下，您必须使用 .live()。)
关于javascript - 动态创建的复选框未触发操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12602711/