Question

我有以下代码：

$('#main-button').click(function(){

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

每当我单击#main-button，说3次，然后单击#button，就会出现3个弹出框。如何防止这种情况发生，因此无论点击#main-button多少次，单击#button时只会出现一个弹出框？

Answer 1

使用jQuery one，或解释您要做的事情，可以有更好的解决方案。

$('#main-button').click(function(){

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

例如，如果您的问题与#button仅在您单击#main-button时出现，则使用jquery on()在适当的级别使用委派。（我使用文档中的委托作为示例不清楚）

$('#main-button').click(function(){

});


$(document).on('click','#button',function(){
   alert('something');
});

Answer 2

或者您可以使用此代码：

$('#main-button').click(function(){

    $('#button').unbind("click").click(function(){
        alert('something');
    });
});

更新＃1

从jQuery 1.7开始，unbind已被弃用。改为使用off方法。

Answer 3

如果你想只显示#button点击的弹出窗口，你为什么要把#button点击功能放在＃main-button点击功能里？

你可以单独使用它们;

$('#main-button').click(function(){

});


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

Answer 4

写一下：

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

或者，

$('#button').click(function(e){
    e.preventDefualt();
    alert('something');
});

我希望它有所帮助。

Answer 5

一个简单的解决方案是在按钮外设置一个变量，然后在第一次点击时更改该值

var clicked = 0;
$('#button').click(function(){
  if(clicked === 0) {
    alert('something');
    clicked = 1;
  }
});

Answer 6

解决方案就在那里。每次单击时，#main-button的事件处理程序都会将单击处理程序分配给另一个按钮。因此，您会收到X警报。

两种可能的快速修复方法，既不优雅，只是为了向您展示出错的地方：

var isAssigned = false;
$('#main-button').click(function(){
    if (!isAssigned) {
        $('#button').click(function(){
            alert('something');
        });
    }
    isAssigned = true;
});

或

function myHandler() {
    $('#button').click(function(){
        alert('something');
    });
}

$('#main-button').click(function(){
    $('#button').off('click', myHandler);
    $('#button').on('click', myHandler);
});

Answer 7

War10ck：确实如此，有更新的代码＆amp;小提琴。

最佳解决方案是在点击链接时取消绑定点击事件。

$(function() {
    $('#link').on('click', function() {
        if (!$(this).data('processing')) {
            $(this).data('processing', true);
            alert('A was clicked!!');
            $(this).data('processing', false);
        }
    });
});

http://jsfiddle.net/6jsgs/

如何防止在Jquery中多次调用函数

7 个答案: