Action not triggered with checkbox created dynamically
Question
When I created a checkbox with HTML the action is triggered normal but the problem when I create the checkbox with javascript(when I add a row in my table with button and I click to the new checkbox) action does not work.
This is my code :
<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>
Thank you
5 answers
solution1
5 ACCPTED 2012-09-26 13:25:04
That's because your event handler:
$('input[name=chk]').change(function() { ... });
...is applied only to those inputs that match the selector at that moment - before the dynamically created inputs exist. You can instead use a delegated event handler that is attached to a parent element (or to the document) that checks the selector at the time the event occurs:
$('#dataTable').on('change', 'input[name=chk]', function() { ... });
The .on() method was added in version 1.7, so if you're using an older version of jQuery use .delegate() instead. (Unless you're using a really old version, pre 1.4.2, in which case you'll have to use .live() .)
solution2
2 2012-09-26 13:25:32
For dynamically generated elements, events should be delegated from one of static parents of the element or document object, you can use the on method.
$('#dataTable').on('click', 'input[name=chk]', function(){
// ...
})
solution3
1 2012-09-26 13:25:22
The problem here is that you'r trying to attach an event listener (the .change() ) to an element that doesn't exist yet in the DOM. You should bind the listener only after creating the chackbox.
solution4
0 2012-09-26 13:23:55
You should be using the on() method instead, provided you are using jquery 1.7 or above
See working fiddle
$('#dataTable').on('click','input:checkbox',function() {
if ($('input[name=chk]').is(':checked')) {
alert("checked");
}
else {
alert("unchecked");
}
});
solution5
0 2012-09-26 13:27:51
You need to set a .live handler for your checkboxes. Also, in the handler, you can use $(this) to get current checkbox.
Here you are: http://jsfiddle.net/edAv8/
Or you may use .on handler: http://jsfiddle.net/edAv8/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.