我如何事件处理程序分配给使用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> 

这个按预期工作 - 太棒了！

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

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

欢迎任何建议。

Answer 1

这是.live()是:)像这样：

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

当一个元素被添加真正

.live()不添加事件处理程序，但是当你运行它，它增加了一个事件处理document，并倾听冒泡的事件。由于新元素和新元素以同样的方式起泡，添加它们时无关紧要，只要选择器匹配，处理器仍然有效。

也有一个类似的.delegate()（甚至使用.live()内部）如果你知道该按钮会出现一定的容器内，你可以用，说你重新加载通过AJAX #content容器，它会看起来像这样的：

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

此补充说，听众在#content捕获它之前它只是保存了几个气泡，而不是让所有的方式去document冒泡事件......在实践中要么是很好，你可以除非你正在做ton的.live()事件处理程序。