Search code examples
jquerycheckboxrefreshreload

Select all checkbox doesn't work anymore after table reload JQuery

I have a table with some products and near each product I have a checkbox which has as value the product id. On top of the page I have a Select All checkbox which selects/deselects all the other checkboxes using the following jquery function:

$("#selectall").change(function(){
    $(".check").prop('checked', $(this).prop("checked"));
});

Anyway, I have a "Delete selected" button which removes from my table the checked products. This button refreshes only my table, not the entire page, in an ajax function, using:

$("#prodTable").load( "../product #prodTable" );

My problem is that after I refresh the table, the "Select All" checkbox doesn't work anymore.

Solution

  • You need to use event delegation for attaching event to dynamically added dom:

    $("#prodTable").on('change','#selectall',function(){
 $(".check").prop('checked', $(this).prop("checked"));
});