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

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();
     });
});

所以似乎click事件被应用了两次/ +因为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>');
});

看到一个有效的jsFiddle.

请注意,我已经删除了val调用,因为a元素不能有值...还要注意该on方法是在jQuery 1.7中引入的; 在此之前,使用delegate:

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

Answer 2

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

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