CODEWITHSUNDEEP
javascriptjqueryrubyajaxsinatra
Alexandre
Alexandre

Reputation: 13318

Scripts no longer work after ajax request

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.

Upvotes: 1

Views: 2902

Answers (2)

epascarello
epascarello

Reputation: 207527

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

Upvotes: 5

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324720

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.

Upvotes: 2

Related Questions