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

Question

我有一个<div>s 列表，它们具有相同的html，但html内的值不同。层次结构如下：

<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()在注入html的ajax调用中使用了函数。

$.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
};