Como verificar se o evento click já está vinculado - JQuery

Estou vinculando um evento de clique com um botão:

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

Em um cenário, isso está sendo chamado várias vezes; portanto, quando faço um trigger, vejo várias chamadas ajax que desejo impedir.

Como faço bindapenas se não estiver vinculado antes.

Atualização 24 de agosto '12 : No jQuery 1.8, não é mais possível acessar os eventos do elemento usando .data('events'). (Veja este bug para obter detalhes.) É possível acessar os mesmos dados com jQuery._data(elem, 'events')uma estrutura de dados interna, que não é documentada e, portanto, não tem 100% de garantia de permanecer estável. No entanto, isso não deve ser um problema, e a linha relevante do código do plug-in acima pode ser alterada para o seguinte:

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

Os eventos do jQuery são armazenados em um objeto de dados chamado events, para que você possa pesquisar:

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

Seria melhor, é claro, se você pudesse estruturar seu aplicativo para que esse código seja chamado apenas uma vez.

Isso pode ser encapsulado em um 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));
};

Você pode ligar para:

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

Mais uma maneira - marque esses botões com uma classe e filtro CSS:

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

Nas versões recentes do jQuery, substitua bindpor on:

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

Se você estiver usando o jQuery 1.7+:

Você pode ligar offantes on:

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

Se não:

Você pode simplesmente desatar o primeiro evento:

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

A melhor maneira que vejo é usar live () ou delegate () para capturar o evento em um pai e não em cada elemento filho.

Se o botão estiver dentro de um elemento #parent, você poderá substituir:

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

de

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

mesmo que #myButton ainda não exista quando esse código for executado.

Eu escrevi um plugin muito pequeno chamado "once" que faz isso. Execute dentro e fora do elemento.

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

E simplesmente:

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

Por que não usar isso

unbind() antes bind()

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

Aqui está a minha versão:

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)

Baseado na resposta @ konrad-garus, mas usando data, já que acredito que classdeve ser usado principalmente para estilizar.

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

Para evitar verificar / ligar / desligar, você pode mudar sua abordagem! Por que você não usa Jquery .on ()?

Como o Jquery 1.7, .live (), .delegate () está obsoleto, agora você pode usar .on () para

Anexe um manipulador de eventos para todos os elementos que correspondem ao seletor atual, agora e no futuro

Isso significa que você pode anexar um evento a um elemento pai que ainda existe e anexar elementos filhos, estejam eles presentes ou não!

Quando você usa .on () assim:

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

Você pega o evento, clique no pai e ele procura o filho '#myButton', se existir ...

Portanto, quando você remove ou adiciona um elemento filho, não precisa se preocupar em adicionar ou remover a ligação de evento.

Experimentar:

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

Em junho de 2019, atualizei a função (e ela está funcionando para o que eu preciso)

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

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

JQuery tem solução :

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