小编典典

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

ajax

我有一个<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;
        });

    }        
});

目前,它不起作用。那么,有什么想法可以使这件事起作用吗?


阅读 225

收藏
2020-07-26

共1个答案

小编典典

您需要将事件处理程序绑定到应在其上触发事件的元素的公共祖先。例如,如果您#element将追加内div具有idparent

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