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专家，但我相信即使元素发生变化，它也会保留事件处理程序。

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

2 个答案: