在ajax请求之后,脚本不再起作用

Question

页面上有一个表格,我通过ajax更新.有些脚本使用表的内容.例如,其中一个使用Check all / Uncheck all表上的" "复选框到该表上check/uncheck的其他复选框.

当我执行ajax请求时,它返回几乎相同的表内容.至少,它绝对是正确的,不应该破坏脚本的功能.但是,之后没有任何脚本不再起作用.为什么？

例如,以下是*.js文件中javascript代码的一部分:

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

在执行ajax之前,请求一切正常.请注意,ajax不会返回任何javascript代码,所有javascript代码都位于外部js文件中.

Answer 1

因为您正在使用在document.ready上添加的事件处理程序,并且在它之后添加的任何事件都没有事件.

在jQuery 1.7之后,你可以使用on.

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

其他选项是保留您拥有的内容,只需在更新页面内容时调用代码即可.

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

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

和你的Ajax调用

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