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

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

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

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

它工作正常，直到我插入新的 <div id="element> ... </div> .评论图标点击事件处理程序不匹配。我搜索了那个问题，所有人都说.delegate()应该使用。

我的问题是我不知道在哪里使用委托(delegate)函数。之前，我从 ajax 获取结果以注入(inject) <div id="element> ... </div> , 我用过 .delegate()注入(inject) 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

您需要将事件处理程序绑定(bind)到应触发它的元素的共同祖先。例如，如果您的 #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 值是无效的。在这里，我已将您的 element ID 值更改为类名。

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

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