javascript - Jqueryで関数を複数回呼び出さないようにする方法

Question

次のコードがあります。

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

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

#main-button を 3 回クリックしてから #button をクリックすると、3 つのポップアップ ボックスが表示されます。#main-button が何回クリックされても、#button がクリックされたときにポップアップボックスが 1 つだけ表示されるようにするにはどうすればよいですか?

Answer 1

解決策はすぐそこにあります。のイベント ハンドラーは、#main-buttonクリックするたびにクリック ハンドラーを他のボタンに割り当てます。したがって、X アラートを受け取ります。

どちらもエレガントではありませんが、どこが間違っているかを示すための2つの簡単な修正があります。

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 2

どちらかを書く：

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

または、

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

お役に立てば幸いです。

Answer 3

簡単な解決策は、ボタンの外側に変数を設定し、最初にクリックしたときに値を変更することです

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

Answer 4

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/