Scripts no longer work after ajax request

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.

• Manse: .change() wont work for content added using AJAX (ie elements added after event handler is bound) - have a look at .on()

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

• Alexandre: Is that so? Everything added after it has exactly the same ids and classes.
• epascarello: @Alexandre, it does not matter. You remove the event handlers when you replace it. The browser does not magically know how to reapply it.
• Alexandre: <<other option is to keep what you have>> Please explain.

Answer 2

The event is attached to the old page content. If you replace that content, the events go with it.

Instead, try using $("#check-all").on("change",function() {...}); I'm no jQuery expert, but I believe that will persist the event handler even if the element changes.