Question

让我说我有

function trigger(){

    $('a.pep').each(function(){
            $('a.pep').click(function(){
            console.log($(this).val());
        });
    });
}
function push(){
    $('body').append('<a class="pep">hey mate i have no trigger yet</a>');
    trigger();  //now i do but the others have duplicated trigger
}
$(document).ready(function(){
     $('a.push').click(function(){
        push();
     });
});

所以似乎点击事件被应用了两次/ +因为console.log通过点击多次推出

我该如何防止这种情况？

Answer 1

问题是您多次拨打$('a.pep').click()。（实际上，您绑定的点击处理程序与每个元素的匹配元素一样多。然后每次单击其中一个时再次执行此操作。）

您应该使用DOM事件冒泡模型来处理此问题。 jQuery可以帮助您使用on方法：

$(document.body).on('click', 'a.pep', function() {
    console.log('element clicked');
    $(document.body).append('<a class="pep">Click handlers handled automatically</a>');
});

See a working jsFiddle.

请注意，我已删除val调用，因为a元素不能有值...另请注意，jQuery 1.7中引入了on方法;在此之前，请使用delegate：

$(document.body).delegate('a.pep', 'click', function() {

Answer 2

您需要对触发功能进行微小更改。只需在绑定之前取消绑定click事件，以确保它永远不会被添加多次。此外，您不需要在绑定事件时使用每个事件，它会自动将事件添加到每个项目。

function trigger(){        
    $('a.pep').unbind('click').click(function() {
        console.log($(this).val());
    });
}

Answer 3

如果附加了所需的事件，您可以在任何元素上使用data('events')进行检查。例如，要检查是否附加click事件，请尝试此操作。

if(!$('a.pep').data('events').click){
   $('a.pep').click(function(){
      console.log($(this).val());
   });
}

Answer 4

你应该使用jQuery live here，因为你动态添加了DOM元素，并且希望它们具有相同的click行为

function push(){
    $('body').append('<a class="pep">hey mate i have no trigger yet</a>');
}
$(document).ready(function(){
     $('a.push').click(function(){
        push();
     });
     $('a.pep').live('click', function(){
        console.log($(this).val());
    });
});

Answer 5

尝试：

if($('a.pep').data('events').click) {
   //do something
}

Answer 6

我认为如果您使用live（）事件，则不需要创建函数

$('a.pep').live('click', function(){
    console.log($(this).val());
});

如何检查是否已存在与元素关联的单击/事件

6 个答案: