Event does not fire on change for dynamic table row creation

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

$('parent-of-input:checkbox').on("change", 'input:checkbox' ,function(e) { The thing that happens is that a listener isn't put on the new element, if you put in on the parent and then on the child like this, then it is automatically added — Pavlo, Jan 14 '18 at 21:08

score 0 · Answer 1 · edited Aug 22 '18 at 22:12

0

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.

edited Aug 22 '18 at 22:12

Bharata

13,509
6
36
50

answered Jan 14 '18 at 21:07

Sergey Benzenko

280
2
14

score 0 · Answer 2 · answered Jan 14 '18 at 21:10

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/

score 0 · Answer 3 · edited Aug 22 '18 at 22:12

0

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 )

edited Aug 22 '18 at 22:12

Bharata

13,509
6
36
50

answered Jan 14 '18 at 21:23

sudip

2,781
1
29
41

score 0 · Accepted Answer · answered Jan 14 '18 at 21:24

0

use event delegation and change your event binding from

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

to

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

answered Jan 14 '18 at 21:24

Muhammad Omer Aslam

22,976
9
42
68

Event does not fire on change for dynamic table row creation

4 Answers4