Tıklama olayının zaten bağlı olup olmadığı nasıl kontrol edilir - JQuery

Bir düğmeyle bir tıklama olayını bağlıyorum:

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

Bir senaryoda, bu birden çok kez çağrılıyor, bu yüzden bir triggeryaptığımda, önlemek istediğim birden fazla ajax çağrısı görüyorum.

Nasıl bindsadece önceden bağlı değilse.

24 Ağu '12 Güncellemesi : jQuery 1.8'de, öğesini kullanarak öğenin etkinliklerine erişmek artık mümkün değildir .data('events'). (Ayrıntılar için bu hataya bakın.) Aynı verilere jQuery._data(elem, 'events'), belgelenmemiş ve bu nedenle% 100 kararlı kalması garanti edilmeyen dahili bir veri yapısı ile erişmek mümkündür . Bununla birlikte, bu bir sorun olmamalıdır ve yukarıdaki eklenti kodunun ilgili satırı aşağıdaki şekilde değiştirilebilir:

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

jQuery olayları, burada eventsarama yapabilmeniz için adı verilen bir veri nesnesinde saklanır :

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

En iyisi, uygulamanızı bu kod yalnızca bir kez çağrılacak şekilde yapılandırabilmenizdir.

Bu bir eklenti içine alınabilir:

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

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

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

Daha sonra arayabilirsin:

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

Bir yol daha - bu tür düğmeleri bir CSS sınıfıyla işaretleyin ve filtreleyin:

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

Son jQuery sürümlerinde bindşununla değiştirilir on:

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

JQuery 1.7+ kullanıyorsanız:

Daha offönce arayabilirsin on:

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

Değilse:

İlk olayı çözebilirsiniz:

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

Gördüğüm en iyi yol, olayı her bir alt öğede değil, bir ebeveynde yakalamak için live () veya delegate () kullanmaktır.

Düğmeniz bir #parent öğesinin içindeyse, değiştirebilirsiniz:

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

tarafından

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

Bu kod çalıştırıldığında #myButton henüz mevcut olmasa bile.

Bunu yapan "bir kez" adında çok küçük bir eklenti yazdım. Eleman içinde kapatıp açın.

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

Ve basitçe:

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

Neden bunu kullanmıyorsun

unbind() önce bind()

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

İşte benim versiyonum:

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;
};

Kullanımı:

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

@ Konrad-garus cevabına dayanıyor, ancak kullanıyor data, çünkü classçoğunlukla stil için kullanılması gerektiğine inanıyorum .

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

Kontrol etme / bağlama / çözme işlemlerini önlemek için yaklaşımınızı değiştirebilirsiniz! Neden Jquery .on () kullanmıyorsunuz?

Jquery 1.7, .live (), .delegate () kullanımdan kaldırıldığından, artık .on () kullanarak

Şu anki seçiciyle eşleşen tüm öğeler için şimdi ve gelecekte bir olay işleyicisi ekleyin

Bu, hala var olan bir ana öğeye bir olay ekleyebileceğiniz ve mevcut olsun veya olmasın alt öğeler ekleyebileceğiniz anlamına gelir!

.On () 'u şu şekilde kullandığınızda:

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

Üst öğede olay tıklamasını yakalarsınız ve varsa '#myButton' alt öğesini ararsınız ...

Bu nedenle, bir alt öğeyi kaldırdığınızda veya eklediğinizde, olay bağlamayı ekleyip kaldırmayacağınız konusunda endişelenmenize gerek yoktur.

Deneyin:

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');
    });
}

Haziran 2019 itibarıyla işlevi güncelledim (ve ihtiyacım olan şey için çalışıyor)

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

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

JQuery'nin çözümü var :

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

eşdeğer:

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