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

Answer 2

该事件将附加到旧页面内容。 如果替换该内容，则事件随之发生。

而是尝试使用$("#check-all").on("change",function() {...}); 我不是jQuery专家，但我相信即使元素发生更改，它也将保留事件处理程序。