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.

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.

• javascript
• jquery
• ruby
• ajax
• sinatra

• .change() wont work for content added using AJAX (ie elements added after event handler is bound) - have a look at .on() – Manse Commented Jan 9, 2013 at 16:24

2 Answers 2

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

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.