javascript - 如何在加载了 Ajax 的元素上调用 JavaScript

Question

我有一些功能我想在文档准备好后以及调用 Ajax 后工作，因为新项目被加载到需要选择的页面中。

我可以这样做:

var ready;
ready = function(){
  //my code here
};

$(document).ready(ready)
$(document).ajaxComplete(ready)

但这会导致一个问题，即每次 Ajax 调用似乎都会为函数运行添加另一个时间。在第一次 AjaxComplete 调用后，它运行一次，然后运行两次，然后运行三次，依此类推。

当用户在页面上时，我如何优雅地让所有代码按我希望的方式运行一次？

顺便说一句，这是一个 Ruby on Rails 应用程序。

非常感谢。

Answer 1

您正在寻找 jQuery 的 .delegate 函数。它的作用是绑定(bind)到父元素，每当在其中触发事件时，它都会检查产生事件的子元素是否与您提供的选择器匹配；如果是这样，它将触发处理程序。例如来自 jQuery's docs 的以下示例导致点击表中所有现有和 future 的 td 以切换“选择的”类:

$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

因此，如果您向表中添加一个新行，即使在您调用委托(delegate)时该行不存在，单击它也会切换为“已选择”。

如果这有意义或者您有任何问题，请告诉我:)