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>

这按预期工作 - 太棒了！

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

如何在不使用内联javascript的情况下为此元素添加事件处理程序？

欢迎任何建议。

Answer 1

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

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

.live()在添加元素时不添加事件处理程序，但在运行时会向document添加事件处理程序，并侦听冒泡的click事件起来。由于旧元素和新元素以相同的方式冒泡...添加它们无关紧要，只要选择器匹配，click处理程序仍然有效。

还有一个类似的.delegate()（甚至内部使用.live()），如果你知道按钮将在某个容器内，你可以使用它，比如说你正在重新加载{{1通过AJAX的容器，它看起来像这样：

#content

这增加了在jQuery(function) { jQuery("#content").delegate("#buttonDiv", "click", function() { alert("hello"); }); });处冒泡事件的监听器，它只是在捕获之前保存了一些气泡，而不是让它一直到#content ...在实践中要么很好，要么你无法分辨性能差异，除非你正在做吨的document事件处理程序。

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

1 个答案: