Jak sprawdzić, czy zdarzenie kliknięcia jest już powiązane - JQuery

Zdarzenie kliknięcia wiążę przyciskiem:

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

W jednym scenariuszu jest to wywoływane wiele razy, więc kiedy robię trigger, widzę wiele wywołań Ajax, którym chcę zapobiec.

Jak mam bindtylko wtedy, gdy nie jest to związane wcześniej.

Aktualizacja 24 sierpnia '12 : W jQuery 1.8 nie można już uzyskać dostępu do zdarzeń elementu za pomocą .data('events'). (Zobacz ten błąd, aby uzyskać szczegółowe informacje.) Możliwe jest uzyskanie dostępu do tych samych danych za jQuery._data(elem, 'events')pomocą wewnętrznej struktury danych, która jest nieudokumentowana, a zatem nie gwarantuje 100% stabilności. Nie powinno to jednak stanowić problemu, a odpowiedni wiersz powyższego kodu wtyczki można zmienić na następujący:

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

Zdarzenia jQuery są przechowywane w obiekcie danych o nazwie events, więc możesz szukać w tym:

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

Oczywiście najlepiej byłoby, gdybyś mógł ustrukturyzować swoją aplikację, tak aby ten kod był wywoływany tylko raz.

Można to umieścić we wtyczce:

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

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

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

Możesz wtedy zadzwonić:

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

Jeszcze jedno - oznacz takie przyciski klasą CSS i filtrem:

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

W ostatnich wersjach jQuery zastąpić bindz on:

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

Jeśli używasz jQuery 1.7+:

Możesz zadzwonić offwcześniej on:

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

Jeśli nie:

Możesz po prostu rozpiąć pierwsze zdarzenie:

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

Najlepszym sposobem, jaki widzę, jest użycie live () lub delegate () do przechwytywania zdarzenia w rodzicu, a nie w każdym elemencie podrzędnym.

Jeśli twój przycisk znajduje się wewnątrz elementu #parent, możesz zastąpić:

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

przez

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

nawet jeśli #myButton jeszcze nie istnieje, gdy ten kod jest wykonywany.

Napisałem bardzo małą wtyczkę o nazwie „raz”, która to robi. Wykonywanie i włączanie w elemencie.

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

Po prostu:

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

Dlaczego nie skorzystać z tego

unbind() przed bind()

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

Oto moja wersja:

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

Stosowanie:

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

Na podstawie odpowiedzi @ konrad-garus, ale używam data, ponieważ uważam, że classpowinno być używane głównie do stylizacji.

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

Aby uniknąć sprawdzania / wiązania / usuwania powiązań, możesz zmienić swoje podejście! Dlaczego nie używasz Jquery .on ()?

Ponieważ Jquery 1.7, .live (), .delegate () są przestarzałe, teraz możesz używać .on () do

Dołącz procedurę obsługi zdarzeń dla wszystkich elementów, które pasują do bieżącego selektora, teraz i w przyszłości

Oznacza to, że możesz dołączyć zdarzenie do elementu nadrzędnego, który wciąż istnieje i dołączyć elementy potomne, czy są obecne, czy nie!

Kiedy używasz .on () w ten sposób:

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

Wychwytujesz zdarzenie, klikasz na rodzica i wyszukujesz podrzędny „#myButton”, jeśli istnieje ...

Dlatego kiedy usuwasz lub dodajesz element podrzędny, nie musisz się martwić, czy dodać lub usunąć powiązanie zdarzenia.

Próbować:

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

Od czerwca 2019 r. Zaktualizowałem tę funkcję (i działa zgodnie z potrzebami)

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

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

JQuery ma rozwiązanie :

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

równowartość:

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