如何使用 ajax 和 UJS 将事件处理程序分配给页面对象

Question

有人可以建议解决此问题的好方法吗：

在页面加载时，将事件处理程序添加到页面元素。例如：

// Javascript
// when page is loaded...
jQuery(document).ready(function) {
  // assign this handler to the buttonDiv element...
  jQuery("#buttonDiv").click(function() {
    // to alert "hello"
    alert("hello");
  });
}


// HTML 5
<div id="buttonDiv">Click me </div>

这按预期工作 - 太棒了！

但是假设当加载文档并稍后使用 Ajax 将其添加到 DOM 时，div#buttonDiv 不存在。在这种情况下，不会添加 click() 事件处理程序，也不会调用任何警报。

如何在不使用内联 JavaScript 的情况下向该元素添加事件处理程序？

欢迎任何建议。

Answer 1

这就是 .live() 的用途:)像这样：

jQuery(function) {
  jQuery("#buttonDiv").live("click", function() {
    alert("hello");
  });
});

.live() 在元素出现时不添加事件处理程序确实添加了，但是当您运行它时，它会向 document 添加一个事件处理程序，并侦听冒泡的 click 事件。由于新旧元素以相同的方式冒泡...它们何时添加并不重要，只要选择器匹配，click 处理程序仍然有效。

还有一个类似的 .delegate() （甚至使用 .live() 内部），如果您知道该按钮将在某个容器内，假设您通过 AJAX 重新加载 #content 容器，它看起来像这样：

jQuery(function) {
  jQuery("#content").delegate("#buttonDiv", "click", function() {
    alert("hello");
  });
});

这会在 #content 它只是在捕获它之前保存一些气泡，而不是让它一直到 document...实际上，两者都很好，并且您无法分辨性能差异，除非您'正在执行大量 .live() 事件处理程序。