Question

如果我将处理程序分配给元素的OnClick事件两次，则处理程序将执行两次。但我想改变这一点，即使我分配两次，处理程序也只会执行一次。

证明问题的荒谬示例：

$('.button').click(
    function(){
       alert('here');
});
$('.button').click(
    function(){
       alert('here');
});

所以我已经添加了两次处理程序。现在，当我点击该类的元素时，我会得到两个警告框。

问题是，如何限制它以便我只获得一个警报框？

Answer 1

如果.one()实际上是你所追求的（在触发一次后删除事件处理程序），那么我相信这是正确的答案。如果没有，您可以在绑定之前取消绑定事件：

var myEventHandler = function () {alert('hello')};
$('a').unbind('click', myEventHandler);
$('a').bind('click', myEventHandler);

应该工作。

编辑：由于此回复不断获得投票，我将添加另一个（在大多数情况下更好）解决方案，至少在OP的情况下。处理动态添加的内容时，只需在父元素上使用jQuery的on()，而不是直接在元素上应用事件处理程序。

http://api.jquery.com/on/

Answer 2

使用一个。 http://api.jquery.com/one/

$( ".button" ).one( 'click', function(){
    alert( '....' )
});

Answer 3

要仅触发一次事件，请仅绑定一次。动态添加元素时，使用on()将事件处理程序绑定到父元素：

请参阅此jsfiddle：

<div id="container">
 <p>Paragraph #1</p>
</div>

<div>
 <button id="add">Add Elements</button>
</div>

<script type="text/javascript">
 var n = 1;
 $('#add').click(function() {
   $('#container').append('<p>Paragraph #' + ++n + '</p>');
 });
 $('#container').on('click', 'P', function() {
   alert($(this).text());
 });
</script>

请注意事件处理程序仅在on()注册一次。动态添加元素的代码不会注册事件处理程序。

Answer 4

一个可以提供帮助的小技巧：

jQuery(".button:not(.clickadded)").click(function(){

     alert('here');

).addClass("clickadded");

Answer 5

您还可以删除功能关闭（'点击'）功能中的所有现有点击事件：

$('.button').off('click').click(function() {
    ...
});

Answer 6

我用旗帜解决了这个问题，我知道这不仅仅是一个想法

if (!alreadyBound) {
     $('.button').bind('click', submitEvtHandler);
     alreadyBound = true;
}

Answer 7

这是我正在使用的方法，在某些方面类似于Miquel的方法。

$.prototype.once = function() {
    var ret = this.not(function() {
        return this.once;
    });
    this.each(function(id, el) {
        el.once = true;
    });
    return ret;
};

像这样使用，

$('#footer')
    .once()
    .click(function(){
        console.log('click the footer');
    });

一旦支持参数，您就可以拥有不同的类型

Answer 8

我认为两次添加功能没有意义。但是，如果必须，您可以将return false添加到其中一个函数中。

$('.button').click(
    function(){
       return false;
       alert('here');
});
$('.button').click(
    function(){
       alert('here');
});

只使用jQuery添加一次OnClick处理程序 - 即使再次调用

8 个答案: