Simple Check all (for checkboxes) not working

Question

I have a form; when I submit it I use an Ajax call and put the result in a div by the following line of code:

$("#resultFrm2").html(html);

In the result that I put inside a div with the ID of (resultFrm2) I have a checkbox (with the id of "chkAll") to select all other checkboxes (with the clas of "opt"):

                html = "<table id='myTable' class='table table-striped table-bordered table-hover'><thead><tr id='test'><th><div class='td_data'>ID</div></th><th><div class='td_data'>First Name</div></th><th ><div class='td_data'>Last Name</div></th><th><div class='td_data'>User Name</div></th><th><div class='td_data'>Start Date</div></th><th><div class='td_data'><input type='checkbox' id='chkAll'/></div></th></tr></thead><tbody id='contentTable'>";

                for (var i = 0; i < data.length; i++) {
                    html = html + "<tr  id='trResponses' ><td><div class='td_data'>" + data[i]['id'] + "</div></td><td><div class='td_data'>" + data[i]['firstName'] + "</div></td><td><div class='td_data'>" + data[i]['lastName'] + "</div></td><td><div class='td_data'>" + data[i]['username'] + "</div></td><td><div class='td_data'>" + data[i]['start'] + "</div></td><td><div class='td_data'><input class='checkbox opt' type='checkbox' name='check_list[]'  /></div></td></tr>";

                }

Now I'm using a jquery to implement select all checkbox " I'm putting my Jquery code inside of $(document)ready(... ":

$("#chkAll").click(function() {
    alert('inside');
    $(".opt").prop('checked', this.checked);
});

and it does not work! however if I try my above code on a simple code it works fine! since my checkboxes with the id of "chkAll" for check all and with class of "opt" for all of the other checkboxes are rendered and put in HTML with ajax call, can this be the reason that why this simple jquery not working?

Please let me know if my question is not clear, and I will provide more clarification.

Thanks

Answer 1

The problem is that you are listening to click event on document.ready and your content comes from ajax request, so it is not present on DOM-ready. Instead you should use for example a function that would bind your event

function initHandlers() {
   $("#chkAll").click(function() {
       $(".opt").prop('checked', this.checked);
   });
}

And call it on ajax success after this one

$("#resultFrm2").html(html);
initHandlers();

In terms of code j08691's example is much better to use, but i guess mine would work as an example of why it is not working as you expected :)

Answer 2

Use .on() 's event delegation syntax when dealing with dynamically created elements:

$('#resultFrm2').on('click', "#chkAll", function() {
    $(".opt").prop('checked', this.checked);
});

jsFiddle example

As the docs for on state:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.

Answer 3

try to use jquery event delegation

    $(body).on('click',"#chkAll"),function() {
        $(".opt").prop('checked', this.checked);
   });