Question

There is a table on a page which I update over ajax. There are some scripts those use content of a table. For instance, one of them uses “Check all / Uncheck all” checkBox on a table to check/uncheck the other checkboxes on that table.

When I do an ajax request, it returns almost the same content of a table. At least, it’s definitely correct and should not destroy the functionality of the scripts. However, after that none of the scripts no longer work. Why?

For example, here is the part of a javascript code at *.js file:

$(document).ready(function() {
  $("#check-all").change(function(){
      $(".my_table input[type=checkbox]").prop('checked', this.checked);
    });
});

Before executing ajax, request everything is working well. Note that ajax doesn’t return any javascript code, all javascript code is located in an external js file.

Answer 1

Because you are using an event handler that is added on document.ready and anything added after it will not have the events.

After jQuery 1.7, you can use on.

$(document).on("change", "#check-all", function(){ ... });

other option is to keep what you have, just recall the code when you update the page’s content.

function addChangeEvent() {
  $("#check-all").change(function(){
      $(".my_table input[type=checkbox]").prop('checked', this.checked);
    });
}

$(document).ready(function() {
    addChangeEvent();
});

and with your Ajax call

$("#foo").load("xxx.html", function(){ addChangeEvent()l });