的jQuery注入HTML后，事件处理程序不带/工作，没有委托不带、事件、程序、工作
我的℃的列表; DIV＆GT; s的相同的HTML，但里面的html不同的值。该层次结构如下;
I have a list of <div> s with same html but different values inside html. The hierarchy is the following ;
<div id="element">
<div class="likecomm">
<a class="commenticon" href="#">...some value according to the returning value...</a>
</div>
</div>
<div id="element">
<div class="likecomm">
<a class="commenticon" href="#">...some value according to the returning value...</a>
</div>
</div>
在一个事件，我注入的HTML的列表的顶部是另一个＆所述;股利的id =组件＆gt; ...＆所述; /格＆GT;
In an event, I inject html to the top of the list which is another <div id="element> ... </div>
我有以下事件处理程序注释图标点击;
I have the following event handler for comment icon click;
$('.commenticon').click(function(){
$(this).closest('.actionframe').next('nav').slideToggle(300);
return false;
});
它的工作原理正确的，直到我插入新的＆LT; DIV ID =组件＆gt; ...＆LT; / DIV＆GT; 注释图标点击事件处理程序不比赛，我搜索关于这个问题，所有的都在说， .delegate（）应使用。
It works correct until I insert the new <div id="element> ... </div>. The comment icon click event handler doesn't match. I searched about that problem, all were saying that .delegate() should be used.
我的问题是，我不知道在哪里可以使用委托功能。之前，我从阿贾克斯的结果，以注入＆LT; DIV ID =组件＆gt; ...＆LT; / DIV＆GT; ，我用 .delegate（）函数在Ajax调用了HTML注入
My problem is I don't know where to use the delegate function. Before, I get the results from ajax in order to inject the <div id="element> ... </div> , I used .delegate() function in ajax call that injects html.
$.ajax({
success:function(data) {
var html=... // the necessary div html binded with data
// prepend function call()
$('.likecomm').delegate(".commenticon","click" , function() {
$(this).closest('.actionframe').next('nav').slideToggle(300);
return false;
});
}
});
目前，这是行不通的。因此，任何想法如何使这件事的工作？
Currently, it doesn't work. So, any ideas how to make this thing work ?
推荐答案
您需要将事件处理程序绑定到它应该被触发的因素的共同祖先。例如，如果你的 #element 被附加在 DIV 与 ID ：
You need to bind the event handler to a common ancestor of the elements on which it should be triggered. For example, if your #element gets appended inside a div with an id of parent:
$("#parent").delegate(".commenticon", "click", function() {
//Do stuff
});
这将是像这样的HTML结构：
This would be for an HTML structure like so:
<div id="parent">
<div class="element">
</div>
<div class="element">
</div>
</div>
这部作品的原因是，DOM事件冒泡从点的树，其起源。该代理方法捕获事件的祖先元素，并检查是否起源于匹配选择器的元素。
The reason this works is that DOM events bubble up the tree from the point at which they originate. The delegate method captures the event at an ancestor element and checks whether or not it originated at an element matching the selector.
另外请注意，这是无效的有重复的 ID 值在同一个文档。在这里，我改变了你的元素 ID值到类名来代替。
Also note that it's invalid to have duplicate id values in the same document. Here I've changed your element ID values to class names instead.
最后，如果你正在使用jQuery 1.7+你应该使用在 方法来代替。这将有同样的效果，但要注意的第2个参数的逆转：
Finally, if you are using jQuery 1.7+ you should use the on method instead. It will have the same effect, but notice the reversal of the first 2 arguments:
$("#parent").on("click", ".commenticon", function() {
//Do stuff
};
