[英]Action not triggered with checkbox created dynamically
當我創建帶有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() { ... });
...僅應用於當時與選擇器匹配的那些輸入-在動態創建的輸入存在之前。 相反，您可以使用附加到父元素（或文檔）的委托事件處理程序，該事件處理程序在事件發生時檢查選擇器：
$('#dataTable').on('change', 'input[name=chk]', function() { ... });
.on()方法是在1.7版中添加的，因此，如果您使用的是舊版jQuery，請改用.delegate() 。 （除非您使用的是 1.4.2之前的舊版本，否則必須使用.live() 。）
對於動態生成的元素，應從元素或文檔對象的靜態父級之一委托事件，可以使用on方法。
$('#dataTable').on('click', 'input[name=chk]', function(){
// ...
})
這里的問題是您試圖將事件偵聽器（ .change() ）附加到DOM中尚不存在的元素。 您僅應在創建chackbox之后綁定偵聽器。
如果您使用的是jQuery 1.7或更高版本，則應改用on()方法
查看工作提琴
$('#dataTable').on('click','input:checkbox',function() {
if ($('input[name=chk]').is(':checked')) {
alert("checked");
}
else {
alert("unchecked");
}
});
您需要為復選框設置一個.live處理程序。 另外，在處理程序中，您可以使用$（this）獲取當前復選框。
您在這里： http : //jsfiddle.net/edAv8/
或者您可以使用.on處理程序： http : //jsfiddle.net/edAv8/1/
無法通過JavaScript中動態創建的復選框的檢查操作來創建表格行
[英]Not able to create a table row from the check action of a dynamically created checkbox in javascript
用於檢查是否在動態創建的按鈕單擊時選中了動態創建的復選框的Javascript
[英]Javascript to check if a dynamically created checkbox is checked on a dynamically created button click
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.