Question

我有一个<div>的列表，其中包含相同的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>，我在注入html的ajax调用中使用了.delegate()函数。

$.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的{{1}}内，则{/ 1}}

$("#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
};

Answer 2

您正在添加<div id="element> ... </div>，这意味着最初不存在这些内容。您需要将委托添加到存在的上一级。然后，在“容器”下添加的任何.commenticon都会有点击事件。

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

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

2 个答案: