Cómo verificar si el evento click ya está enlazado - JQuery

Estoy vinculando un evento de clic con un botón:

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

En un escenario, esto se llama varias veces, por lo que cuando hago una trigger, veo varias llamadas ajax que quiero evitar.

¿Cómo lo hago bindsolo si no está vinculado antes?

Actualización 24 de agosto '12 : en jQuery 1.8, ya no es posible acceder a los eventos del elemento utilizando .data('events'). (Consulte este error para obtener más detalles). Es posible acceder a los mismos datos con jQuery._data(elem, 'events')una estructura de datos interna, que no está documentada y, por lo tanto, no se garantiza que permanezca estable al 100%. Sin embargo, esto no debería ser un problema, y ​​la línea relevante del código del complemento anterior se puede cambiar a lo siguiente:

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

Los eventos jQuery se almacenan en un objeto de datos llamado events, por lo que puede buscar en esto:

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

Sería mejor, por supuesto, si pudiera estructurar su aplicación para que este código solo se llame una vez.

Esto podría encapsularse en un complemento:

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

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

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

Entonces puedes llamar a:

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

Una forma más: marque dichos botones con una clase CSS y filtro:

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

En versiones recientes de jQuery, reemplace bindcon on:

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

Si usa jQuery 1.7+:

Puedes llamar offantes on:

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

Si no:

Simplemente puede desvincularlo primer evento:

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

La mejor manera que veo es usar live () o delegate () para capturar el evento en un elemento primario y no en cada elemento secundario.

Si su botón está dentro de un elemento #parent, puede reemplazar:

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

por

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

incluso si #myButton aún no existe cuando se ejecuta este código.

Escribí un plugin muy pequeño llamado "una vez" que hace eso. Ejecutar de vez en cuando en el elemento.

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

Y simplemente:

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

¿Por qué no usar esto?

unbind() antes de bind()

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

Aquí está mi versión:

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)

Basado en la respuesta @ konrad-garus, pero usando data, ya que creo que classdebería usarse principalmente para el estilo.

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

Para evitar marcar / vincular / desvincular, ¡puede cambiar su enfoque! ¿Por qué no usas Jquery .on ()?

Como Jquery 1.7, .live (), .delegate () está en desuso, ahora puede usar .on () para

Adjunte un controlador de eventos para todos los elementos que coincidan con el selector actual, ahora y en el futuro

¡Significa que puede adjuntar un evento a un elemento primario que aún existe y adjuntar elementos secundarios si están presentes o no!

Cuando usas .on () así:

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

Captura el evento, haz clic en padre y busca hijo '#myButton' si existe ...

Por lo tanto, cuando elimine o agregue un elemento secundario, no tendrá que preocuparse de si desea agregar o eliminar el enlace del evento.

Tratar:

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 partir de junio de 2019, he actualizado la función (y está funcionando para lo que necesito)

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

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

JQuery tiene solución :

$( "#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 );
});