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

【问题标题】：How can I assign event handler to page objects using ajax and UJS如何使用 ajax 和 UJS 将事件处理程序分配给页面对象
【发布时间】：2010-09-09 10:22:24
【问题描述】：

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

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

// 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 的情况下向该元素添加事件处理程序？

欢迎提出任何建议。

【问题讨论】：

标签： jquery ruby-on-rails jquery-events ujs

【解决方案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...实际上两者都很好，你不能告诉性能差异，除非您正在执行 ton 的 .live() 事件处理程序。

【讨论】：

谢谢尼克...帮了大忙！