ajax 请求后脚本不再工作答案

【问题标题】：Scripts no longer work after ajax requestajax 请求后脚本不再工作
【发布时间】：2012-12-23 21:05:26
【问题描述】：

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

【问题讨论】：

.change() 不适用于使用 AJAX 添加的内容（即在绑定事件处理程序后添加的元素） - 查看.on()

标签： javascript jquery ruby ajax sinatra

【解决方案1】：

因为您使用的是在 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 });

【讨论】：

是这样吗？之后添加的所有内容都具有完全相同的 id 和类。
@Alexandre，没关系。替换事件处理程序时删除它。浏览器并不神奇地知道如何重新应用它。
>请解释一下。

【解决方案2】：

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

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

【讨论】：