动态表行创建的更改不会触发事件

Question

Here the first two rows are created manually in html, the 3rd row is created dynamically. Toggle does not work on the dynamically created row.

$(document).ready(function() {
 $('input:checkbox').on("change", function(e) {
    if ($(this).is(":checked")) {
        $(this).closest('tr').find("td.rowC .check").prop("disabled", false);
    } else {
        $(this).closest('tr').find("td.rowC .check").prop("disabled", true);
    }
});});

Answer 1

You should bind the toggle event to all dynamically created elements. Apply your on("change", ... ) code to all 'input:checkbox' elements in your manually created rows after they are created.

Answer 2

You should try out jquery event delegation. The idea behind it is to set the event on a parent element that will always be there (not dynamically added) and then filter it based on the child selector. The code you are running sets up the events ONCE and those elements are later added, thus they don't have change handlers set up.

https://learn.jquery.com/events/event-delegation/

Answer 3

It is not working because the 3rd-row elements were not present in the document at the time of event binding.

You should use "live" (in case of jquery <= 1.7 http://api.jquery.com/live/ ) or $(document).on('click', 'input:checkbox', function(){}); ( jquery > 1.7 Alternative to jquery live that can work )

Answer 4

use event delegation and change your event binding from

 $('input:checkbox').on("change", function(e) {

to

 $(document).on("change",'input:checkbox', function(e) {