So überprüfen Sie, ob das Klickereignis bereits gebunden ist - JQuery

Ich binde ein Klickereignis mit einer Schaltfläche:

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

In einem Szenario wird dies mehrmals aufgerufen. Wenn ich also einen mache, triggersehe ich mehrere Ajax-Aufrufe, die ich verhindern möchte.

Wie mache ich das bindnur, wenn es vorher nicht gebunden ist.

Update 24. August '12 : In jQuery 1.8 ist es nicht mehr möglich, mit auf die Ereignisse des Elements zuzugreifen .data('events'). ( Einzelheiten finden Sie in diesem Fehler .) Es ist möglich, mit jQuery._data(elem, 'events')einer internen Datenstruktur auf dieselben Daten zuzugreifen , die nicht dokumentiert ist und daher nicht zu 100% garantiert stabil bleibt. Dies sollte jedoch kein Problem sein, und die entsprechende Zeile des obigen Plugin-Codes kann wie folgt geändert werden:

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

jQuery-Ereignisse werden in einem Datenobjekt namens aufgerufen events, sodass Sie folgendermaßen suchen können:

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

Es wäre natürlich am besten, wenn Sie Ihre Anwendung so strukturieren könnten, dass dieser Code nur einmal aufgerufen wird.

Dies könnte in ein Plugin eingekapselt werden:

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

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

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

Sie könnten dann anrufen:

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

Noch eine Möglichkeit: Markieren Sie solche Schaltflächen mit einer CSS-Klasse und einem Filter:

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

In neueren jQuery-Versionen ersetzen Sie binddurch on:

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

Bei Verwendung von jQuery 1.7+:

Sie können offvorher anrufen on:

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

Wenn nicht:

Sie können das erste Ereignis einfach aufheben:

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

Ich sehe am besten live () oder delegate (), um das Ereignis in einem übergeordneten Element und nicht in jedem untergeordneten Element zu erfassen.

Befindet sich Ihre Schaltfläche in einem # Elternelement, können Sie Folgendes ersetzen:

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

durch

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

auch wenn #myButton noch nicht existiert, wenn dieser Code ausgeführt wird.

Ich habe ein sehr kleines Plugin namens "einmal" geschrieben, das das macht. Aus und Ein im Element ausführen.

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

Und einfach:

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

Warum nicht nutzen?

unbind() Vor bind()

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

Hier ist meine Version:

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

Verwendung:

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

Basierend auf @ konrad-garus Antwort, aber mit data, da ich glaube, classsollte hauptsächlich für das Styling verwendet werden.

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

Um das Überprüfen / Binden / Aufheben der Bindung zu vermeiden, können Sie Ihren Ansatz ändern! Warum benutzt du nicht Jquery .on ()?

Da Jquery 1.7, .live (), .delegate () veraltet ist, können Sie jetzt .on () to verwenden

Fügen Sie jetzt und in Zukunft einen Ereignishandler für alle Elemente hinzu, die mit dem aktuellen Selektor übereinstimmen

Dies bedeutet, dass Sie ein Ereignis an ein übergeordnetes Element anhängen können, das noch vorhanden ist, und untergeordnete Elemente anhängen können, unabhängig davon, ob sie vorhanden sind oder nicht!

Wenn Sie .on () wie folgt verwenden:

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

Wenn Sie ein Ereignis abfangen, klicken Sie auf das übergeordnete Element und suchen Sie das untergeordnete Element '#myButton', falls vorhanden ...

Wenn Sie also ein untergeordnetes Element entfernen oder hinzufügen, müssen Sie sich keine Gedanken darüber machen, ob Sie die Ereignisbindung hinzufügen oder entfernen möchten.

Versuchen:

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

Seit Juni 2019 habe ich die Funktion aktualisiert (und sie funktioniert für das, was ich brauche).

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

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

JQuery hat folgende Lösung :

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

Äquivalent:

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