1

我通过 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 文件中。

4

2 回答 2

5

因为您使用的是在 document.ready 上添加的事件处理程序，并且在它之后添加的任何内容都不会包含事件。

jQuery 1.7 之后，就可以使用了。

$(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 });
于 2013-01-09T16:24:20.690 回答
2

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

相反，请尝试使用$("#check-all").on("change",function() {...});我不是 jQuery 专家，但我相信即使元素发生更改，事件处理程序也会持续存在。

于 2013-01-09T16:25:15.343 回答