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

Question

我有以下代码：

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

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

每当我单击#main 按钮时，比如说3 次，然后单击#button，就会出现3 个弹出框。我怎样才能防止这种情况发生，所以无论点击多少次#main-button，点击#button时只会出现1个弹出框？

Answer 1

或者您可以使用以下代码：

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

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

更新#1

自unbindjQuery 1.7 起已弃用。改用off方法。

Answer 2

使用 jQuery之一，或解释您正在尝试做什么，可以有更好的解决方案。

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

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

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

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

});


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

Answer 3

如果您只想显示#button 单击的弹出窗口，为什么要将#button click 函数放在#main-button click 函数中？

您可以单独使用它们；

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

});


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

Answer 4

解决方案就在那里。每次单击另一个按钮时，您的事件处理程序#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 5

要么写：

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

或者，

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

我希望它有所帮助。

Answer 6

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

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

Answer 7

War10ck：没错，已经更新了代码和小提琴。

最好的解决方案是在单击链接时取消绑定单击事件。

$(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/