Come verificare se l'evento click è già associato - JQuery

Sto associando un evento clic con un pulsante:

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

In uno scenario, questo viene chiamato più volte, quindi quando lo faccio triggervedo più chiamate ajax che voglio impedire.

Come faccio bindsolo se non è associato prima.

Aggiornamento 24 agosto '12 : in jQuery 1.8, non è più possibile accedere agli eventi dell'elemento utilizzando .data('events'). (Vedi questo bug per i dettagli.) È possibile accedere agli stessi dati con jQuery._data(elem, 'events')una struttura di dati interna, che è priva di documenti e quindi non garantita al 100% per rimanere stabile. Questo non dovrebbe, tuttavia, essere un problema e la riga pertinente del codice del plugin sopra può essere modificata come segue:

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

Gli eventi jQuery sono memorizzati in un oggetto dati chiamato events, quindi è possibile cercare in questo:

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

Sarebbe meglio, ovviamente, se potessi strutturare la tua applicazione in modo che questo codice venga chiamato solo una volta.

Questo potrebbe essere incapsulato in un plugin:

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

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

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

È quindi possibile chiamare:

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

Un altro modo: contrassegnare tali pulsanti con una classe CSS e un filtro:

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

Nelle recenti versioni di jQuery sostituire bindcon on:

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

Se si utilizza jQuery 1.7+:

Puoi chiamare offprima on:

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

Altrimenti:

Puoi semplicemente scioglierlo al primo evento:

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

Il modo migliore che vedo è usare live () o delegate () per catturare l'evento in un genitore e non in ogni elemento figlio.

Se il tuo pulsante si trova all'interno di un elemento #parent, puoi sostituire:

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

di

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

anche se #myButton non esiste ancora quando viene eseguito questo codice.

Ho scritto un plugin molto piccolo chiamato "once" che lo fa. Eseguire off e on nell'elemento.

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

E semplicemente:

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

Perché non usare questo

unbind() prima bind()

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

Ecco la mia versione:

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

Uso:

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

Basato sulla risposta di @ konrad-garus, ma usando data, poiché credo che classdovrebbe essere usato principalmente per lo styling.

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

Per evitare di controllare / associare / separare, puoi cambiare il tuo approccio! Perché non usi Jquery .on ()?

Poiché Jquery 1.7, .live (), .delegate () è obsoleto, ora puoi usare .on () per

Allega un gestore eventi per tutti gli elementi che corrispondono al selettore corrente, ora e in futuro

Vuol dire che puoi associare un evento a un elemento genitore che è ancora esistente e collegare elementi figli che siano presenti o meno!

Quando usi .on () in questo modo:

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

Prendi l'evento e fai clic sul genitore e cerca il figlio "#myButton" se esiste ...

Pertanto, quando rimuovi o aggiungi un elemento figlio, non devi preoccuparti se aggiungere o rimuovere l'associazione di eventi.

Provare:

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

A partire da giugno 2019, ho aggiornato la funzione (e funziona per quello che mi serve)

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

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

JQuery ha una soluzione :

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

equivalente:

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