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

假设我有

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

函数触发器（）{
$（'a.pep'）。每个（函数（）{
$（'a.pep'）。单击（函数（）{
log（$（this.val（））；
});
});
}
函数push（）{
$（'body'）.append（'hey mate i have no trigger'）；
触发器（）；//现在我有了，但其他人有重复的触发器
}
$（文档）.ready（函数（）{
$（'a.push'）。单击（函数（）{
推（）；
});
});

因此，似乎click事件被应用了两次/+因为console.log被click多次启动

---

如何防止这种情况发生？

您只需要对触发器功能进行少量更改。只需在绑定之前解除对click事件的绑定，以确保不会多次添加它。另外，绑定事件时不需要使用每个，它会自动将事件添加到每个项目中

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

---

您可以在任何元素上使用

数据（'events'）

检查是否附加了所需的事件。例如，要检查是否附加了

单击

事件，请尝试此操作

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

---

问题是您调用了

$（'a.pep'）。多次单击（）。（事实上，只要每个元素有匹配的元素，就可以绑定尽可能多的单击处理程序。然后，每次单击其中一个元素时，都会再次绑定。）

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

尝试：

您应该使用，因为您动态添加DOM元素，并且希望它们具有相同的
单击
行为

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

函数推送（）{
$（'body'）.append（'hey mate i have no trigger'）；
}
$（文档）.ready（函数（）{
$（'a.push'）。单击（函数（）{
推（）；
});
$（'a.pep'）.live（'click'，function（））{
log（$（this.val（））；
});
});
我认为如果使用live（）事件，就不需要生成函数

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

请注意，您使用的是一个无用的匿名函数<代码>$（'a.push'）。单击（push）做同样的事情。哈！谢谢事实上，我在键入note时考虑到
.data（“events”）
已被弃用。@Manuel的确如此，我只是编辑了一下以说明这一点并提供一个替代方案。我应该选择代理吗？（需要1.4 Jquery的支持）@tonimichelcabet Yes，对于1.4使用
delegate
。delegate是1.4.2，所以如果可以使用它，那么就使用它，否则它将是实时或自定义事件冒泡。如果您的所有链接都在一个公共容器中，并且没有更改，那么您可以指定该容器而不是document.body作为初始选择器，这样事件就不会冒泡。未测试，但这似乎解决了我的问题@lonesomeday你认为这有多低效？？？考虑最大10-15。政治公众人物elements@ToniMichelCaubet它仍然有几十个不必要的选择，而且比必要的代码复杂得多。@TonimichelCaubit只有10-15个元素，它可能不会被注意到，但lonesomedays的答案会更好，并且需要更少的代码。
if($('a.pep').data('events').click) {
   //do something
}

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

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