Comment vérifier si l'événement de clic est déjà lié - JQuery

Je lie un événement de clic avec un bouton:

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

Dans un scénario, cela est appelé plusieurs fois, donc lorsque je fais un, triggerje vois plusieurs appels ajax que je veux empêcher.

Comment puis-je bindseulement si ce n'est pas lié avant.

Mise à jour du 24 août 2012 : dans jQuery 1.8, il n'est plus possible d'accéder aux événements de l'élément en utilisant .data('events'). (Voir ce bogue pour plus de détails.) Il est possible d'accéder aux mêmes données avec jQuery._data(elem, 'events'), une structure de données interne, qui n'est pas documentée et donc pas garantie à 100% de rester stable. Cela ne devrait cependant pas être un problème, et la ligne correspondante du code du plugin ci-dessus peut être modifiée comme suit:

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

Les événements jQuery sont stockés dans un objet de données appelé events, vous pouvez donc rechercher dans ceci:

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

Il serait bien sûr préférable que vous puissiez structurer votre application pour que ce code ne soit appelé qu'une seule fois.

Cela pourrait être encapsulé dans 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));
};

Vous pourriez alors appeler:

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

Une autre façon - marquez ces boutons avec une classe CSS et un filtre:

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

Dans les versions récentes de jQuery, remplacez-le bindpar on:

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

Si vous utilisez jQuery 1.7+:

Vous pouvez appeler offavant on:

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

Si non:

Vous pouvez simplement dissocier le premier événement:

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

La meilleure façon que je vois est d'utiliser live () ou delegate () pour capturer l'événement dans un parent et non dans chaque élément enfant.

Si votre bouton est à l'intérieur d'un élément #parent, vous pouvez remplacer:

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

par

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

même si #myButton n'existe pas encore lorsque ce code est exécuté.

J'ai écrit un tout petit plugin appelé "once" qui fait cela. Exécuter et rallumer dans l'élément.

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

Et simplement:

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

Pourquoi ne pas l'utiliser

unbind() avant bind()

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

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

Usage:

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

Basé sur la réponse @ konrad-garus, mais en utilisant data, car je pense qu'il classdevrait être utilisé principalement pour le style.

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

Pour éviter de vérifier / lier / délier, vous pouvez changer votre approche! Pourquoi n'utilisez-vous pas Jquery .on ()?

Depuis Jquery 1.7, .live (), .delegate () est obsolète, vous pouvez maintenant utiliser .on () pour

Joindre un gestionnaire d'événements pour tous les éléments qui correspondent au sélecteur actuel, maintenant et dans le futur

Cela signifie que vous pouvez attacher un événement à un élément parent qui existe toujours et attacher des éléments enfants qu'ils soient présents ou non!

Lorsque vous utilisez .on () comme ceci:

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

Vous attrapez l'événement en cliquant sur le parent et il recherche l'enfant '#myButton' s'il existe ...

Ainsi, lorsque vous supprimez ou ajoutez un élément enfant, vous n'avez pas à vous soucier d'ajouter ou de supprimer la liaison d'événement.

Essayer:

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

Depuis juin 2019, j'ai mis à jour la fonction (et elle fonctionne pour ce dont j'ai besoin)

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

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

JQuery a une solution :

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