クリックイベントが既にバインドされているかどうかを確認する方法-JQuery

クリックイベントをボタンにバインドしています。

$('#myButton').bind('click',  onButtonClicked);

1つのシナリオでは、これが複数回呼び出されているため、実行するtriggerと、防止したい複数のajax呼び出しが表示されます。

bind以前にバインドされていない場合にのみどうすればよいですか。

12年8月24日更新：jQuery 1.8では、を使用して要素のイベントにアクセスすることはできなくなりました.data('events')。（詳細については、このバグを参照してください。）jQuery._data(elem, 'events')内部データ構造であるを使用して同じデータにアクセスすることは可能ですが、これは文書化されていないため、100％安定していることが保証されていません。ただし、これは問題にならず、上記のプラグインコードの関連する行を次のように変更できます。

var data = jQuery._data(this[0], 'events')[type];

jQueryイベントはと呼ばれるデータオブジェクトに格納されるeventsため、次のように検索できます。

var button = $('#myButton');
if (-1 !== $.inArray(onButtonClicked, button.data('events').click)) {
    button.click(onButtonClicked);
}

もちろん、このコードが1回だけ呼び出されるようにアプリケーションを構成できれば最適です。

これはプラグインにカプセル化できます：

$.fn.isBound = function(type, fn) {
    var data = this.data('events')[type];

    if (data === undefined || data.length === 0) {
        return false;
    }

    return (-1 !== $.inArray(fn, data));
};

次に呼び出すことができます：

var button = $('#myButton');
if (!button.isBound('click', onButtonClicked)) {
    button.click(onButtonClicked);
}

もう1つの方法-このようなボタンをCSSクラスとフィルターでマークします。

$('#myButton:not(.bound)').addClass('bound').bind('click',  onButtonClicked);

最近のjQueryバージョンではbind、on次のように置き換えます：

$('#myButton:not(.bound)').addClass('bound').on('click',  onButtonClicked);

jQuery 1.7以降を使用している場合：

off前に呼び出すことができますon：

$('#myButton').off('click', onButtonClicked) // remove handler
              .on('click', onButtonClicked); // add handler

そうでない場合：

最初のイベントをアンバインドするだけです：

$('#myButton').unbind('click', onButtonClicked) //remove handler
              .bind('click', onButtonClicked);  //add handler

私が見る最良の方法は、live（）またはdelegate（）を使用して、各子要素ではなく親でイベントをキャプチャすることです。

ボタンが#parent要素内にある場合は、次のものを置き換えることができます。

$('#myButton').bind('click', onButtonClicked);

沿って

$('#parent').delegate('#myButton', 'click', onButtonClicked);

このコードが実行されたときに#myButtonがまだ存在しない場合でも。

私はそれを行う「once」と呼ばれる非常に小さなプラグインを書きました。要素内でオフとオンを実行します。

$.fn.once = function(a, b) {
    return this.each(function() {
        $(this).off(a).on(a,b);
    });
};

そして単に：

$(element).once('click', function(){
});

なぜこれを使わないのですか

unbind() 前 bind()

$('#myButton').unbind().bind('click',  onButtonClicked);

これが私のバージョンです：

Utils.eventBoundToFunction = function (element, eventType, fCallback) {
    if (!element || !element.data('events') || !element.data('events')[eventType] || !fCallback) {
        return false;
    }

    for (runner in element.data('events')[eventType]) {
        if (element.data('events')[eventType][runner].handler == fCallback) {
            return true;
        }

    }

    return false;
};

使用法：

Utils.eventBoundToFunction(okButton, 'click', handleOkButtonFunction)

@コンラッド・garusの回答に基づいて、しかし、使用してdata、私は信じているので、classスタイリングのために主に使用されるべきです。

if (!el.data("bound")) {
  el.data("bound", true);
  el.on("event", function(e) { ... });
}

チェック/バインド/バインド解除を回避するために、アプローチを変更できます！Jquery .on（）を使用しないのはなぜですか？

Jquery 1.7以降、.live（）、. delegate（）は非推奨となったため、.on（）を使用して

現在および将来の現在のセレクターに一致するすべての要素のイベントハンドラーをアタッチします。

つまり、まだ存在する親要素にイベントをアタッチし、存在するかどうかに関係なく子要素をアタッチできるということです。

次のように.on（）を使用すると：

$('#Parent').on('click', '#myButton'  onButtonClicked);

親のイベントクリックをキャッチし、存在する場合は子「#myButton」を検索します...

したがって、子要素を削除または追加するときに、イベントバインディングを追加または削除するかどうかを心配する必要はありません。

試してください：

if (typeof($("#myButton").click) != "function") 
{
   $("#myButton").click(onButtonClicked);
}

if ($("#btn").data('events') != undefined && $("#btn").data('events').click != undefined) {
    //do nothing as the click event is already there
} else {
    $("#btn").click(function (e) {
        alert('test');
    });
}

2019年6月の時点で、機能を更新しました（必要に応じて機能します）

$.fn.isBound = function (type) {
    var data = $._data($(this)[0], 'events');

    if (data[type] === undefined || data.length === 0) {
        return false;
    }
    return true;
};

jQueryにはソリューションがあります：

$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
}); 

同等：

$( "#foo" ).on( "click", function( event ) {
  alert( "This will be displayed only once." );
  $( this ).off( event );
});