如何防止在Jquery中多次調用函數

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 click函數放在＃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：沒錯，已經更新了代碼和提琴手。

最好的解決方案是在單擊鏈接時取消綁定單擊事件。

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