在通过jquery注入html之后,事件处理程序无法使用/不使用委托

Question

我有一个<div>具有相同html但在html中具有不同值的s 列表.层次结构如下;

<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注入列表的顶部,这是另一个 <div id="element> ... </div>

我有以下事件处理程序用于评论图标点击;

$('.commenticon').click(function(){
    $(this).closest('.actionframe').next('nav').slideToggle(300);
    return false;
});

它工作正确,直到我插入新的<div id="element> ... </div>.注释图标单击事件处理程序不匹配.我搜索了这个问题,所有人都说.delegate()应该使用.

我的问题是我不知道在哪里使用委托功能.之前,我从ajax获取结果以便注入<div id="element> ... </div>,我.delegate()在ajax调用中使用了注入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;
        }); 

    }        
});

目前,它不起作用.那么,任何想法如何使这个东西工作？

Answer 1

您需要将事件处理程序绑定到应该触发它的元素的公共祖先.例如,如果您#element将追加内div具有id的parent:

$("#parent").delegate(".commenticon", "click", function() {
    //Do stuff
});

这将是一个HTML结构,如下所示:

<div id="parent">
    <div class="element">

    </div>
    <div class="element">

    </div>
</div>

这样做的原因是DOM事件从它们起源的点起泡树.该delegate方法在祖先元素处捕获事件,并检查它是否源自与选择器匹配的元素.

另请注意,id在同一文档中包含重复值无效.在这里,我已将您的elementID值更改为类名.

最后,如果您使用的是jQuery 1.7+,则应该使用该on方法.它会产生相同的效果,但请注意前两个参数的反转:

$("#parent").on("click", ".commenticon", function() {
    //Do stuff
};