Cannot catch click event of an element in HTML string [duplicate]

Question

I can easily catch click event of a checkbox as shown below:

<input type="checkbox" id="checkbox1" />

$('#checkbox1').change(function () {
    if (this.checked) {
        //Do stuff
    }
});

On the other hand, I create a checkbox on callback of AJAX (in jQuery DataTable) as HTML and click event of the same element cannot be catched:

//...
"ajaxSource": "/Student/GetStudents",
"fnServerData": function (sSource, aoData, fnCallback) {
    aoData.push({ "name": "all", "value": all });
    $.getJSON(sSource, aoData, function (json) {
        fnCallback(json);
        $("div.toolbar").html('<input type="checkbox" id="checkbox1" /> Get all records');
    });
},

What is the most suitable method to get the checkbox value in the HTML string?

You need to use the jQuery on() method. stackoverflow.com/questions/10082031/… — c-bro
– c-bro, Commented Oct 4, 2016 at 17:07

Hurricane Development · Accepted Answer · 2016-10-04 17:09:11Z

3

The change event listener is created on all DOM elements that currently exists, so when you add the new checkbox the change method is not registered. Change your code to this.

$(document).on('change','#checkbox1',function() {
    //stuff
});

answered Oct 4, 2016 at 17:09

Hurricane Development

2,4682 gold badges21 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jack Over a year ago

It seems to work, but I cannot make checkbox retain its value as it is rendered on every callback of AJAX call. Is it possible? On the other hand, should I use the method in your answer in callback method? Or jquery onload?

Jack Over a year ago

What about using an hidden field?

Hurricane Development Over a year ago

The method does not go in the AJAX callback, it should go where you currently have it. To solve your issue, hold the checkbox value in a variable, and on AJAX callback set checkbox value to the saved value.

Jack Over a year ago

Could you please give an example of this by updating your answer? Thanks a lot...

Jack Over a year ago

On the other hand, what is the most suitable way for this situation? Using hidden field or cookie?

|

Collectives™ on Stack Overflow

Cannot catch click event of an element in HTML string [duplicate]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related