evento si legano solo una volta

Question

Ho il seguente codice:

function someMethod() 
{ 
    $(obj).click(function {}); 
} 

someMethod viene chiamato due volte e quindi fare clic su evento è rilegato due volte. Come posso farlo legare solo una volta?

Answer 1

Se è possibile applicarlo, probabilmente vuole dare un'occhiata a event.preventDefault e event.stopPropagation OR slegare e legare ogni volta, all'interno del vostro metodo come

function someMethod() 
{ 
    $(obj).off('click').on('click', function(e) { 
    // put your logic in here 
    }); 
} 

Answer 2

La soluzione ovvia è non chiamare someMethod() due volte. Se non è possibile rimediare, allora si può mantenere una variabile di stato in modo che sempre e solo una volta si lega in questo modo:

function someMethod() 
{ 
    if (!someMethod.bound) { 
     $(obj).click(function() {}); 
     someMethod.bound = true; 
    } 
} 

Nota: questo utilizza una proprietà della funzione stessa, piuttosto che l'introduzione di una variabile globale per tenere traccia se è stato legato. Puoi anche usare una proprietà sull'oggetto stesso.

Si può vedere funziona qui: http://jsfiddle.net/jfriend00/VHkxu/.

Answer 3

var bound = false; 

function someMethod() 
{ 
    if(!bound) 
    { 
     $(obj).click(function {}); 
     bound = true; 
    } 
} 

ma probabilmente guarderei perché è stato chiamato due volte prima di fare una sorta di soluzione alternativa.

Answer 4

jQuery rende chiamare una qualche funzione possibile solo una volta abbastanza facile:

function someMethod() 
{ 

    $(obj).click(function() {}); 
     this.someMethod = $.noop; 
} 

Answer 5

Non esiste un metodo integrato per determinare se è già stata associata questa particolare funzione. È possibile associare più funzioni di clic a un oggetto. Per esempio:

$('#id').bind('click', function(){ 
alert('hello'); 
}); 


$('#id').bind('click', function(){ 
alert('goodbuy'); 
}); 

se si fa quanto sopra quando l'oggetto viene cliccato avviserà ciao allora addio. Per assicurarsi che solo una funzione è destinata a l'evento click non associare il gestore di eventi click quindi associare la funzione desiderata in questo modo:

$(obj).unbind('click').bind('click', function(){... }); 

Answer 6

Oltre alla risposta di PNA che si potrebbe desiderare di pensare a namespacing il vostro evento in modo da non lo fai andare in giro per non accoppiare accidentalmente tutti gli eventi click.

 
function someMethod() { 
    $(obj).unbind('click.namespace').bind('click.namespace', function() { }); 
} 

http://docs.jquery.com/Namespaced_Events

Answer 7

Questo è un suggerimento dato che non conosco la tua logica. Potrebbe o potrebbe non funzionare per te.

Prova a combinare jquery live() e una() funzione ti darà un risultato migliore rispetto all'evento rebind.

I casi speciali funzionano quando sono presenti 2 elementi DOM (genitore & child). Live() sul nodo padre si assicura che l'evento venga richiamato e quindi chiama uno() per registrare dinamicamente l'evento che verrebbe eseguito una sola volta. (questo fornisce funzionalità simili come rebinds).

Answer 8

Oppure utilizzare la funzione one() di jQuery che è simile a on() ma attiva l'evento una sola volta, anche se lo si associa più volte.

http://api.jquery.com/one/

Answer 9

Se si desidera associare all'oggetto una sola volta, è necessario implementare una bandiera e attenersi a tale oggetto.

Ad esempio:

if($('#id') && $('#id').data('done') == null)) { 
    $('#id').bind('click', function() { 
     alert('hello'); 
    }); 

    $('#id').data('done', true); 
} 

Answer 10

È possibile aggiungere classe CSS agli elementi associato, quindi filtrare fuori:

function someMethod() 
{ 
    $(obj).not('.click-binded') 
      .click(function {}) 
      .addClass('click-binded'); 
} 

Questo metodo può essere utilizzato anche per i plugin:

$(obj).not('.datetimepicker-applied') 
     .datetimepicker() 
     .addClass('datetimepicker-applied'); 

Answer 11

È possibile utilizzare questa funzione di estensione jQuery.

$.fn.once = function (type, fn, uid) { 
    if(uid == undefined) { 
    console.error("Called $.once without uid\n", this, "\n", fn); 
    } 

    var dataStr = type+"-handler-"+uid; 
    if(!this.data(dataStr)) { 
    this.data(dataStr, true); 
    this.on(type, fn); 
    } 
}; 

Invece di fare questo

$("button").on("click", function(){ 
    alert("You Clicked On A Button"); 
}); 

Ya fare questo

$("button").once("click", function(){ 
    alert("You Clicked On A Button"); 
}, "btnHandler"); 

Ora, quando ho una funzione intorno ad esso

function addBtnHandler() { 
    $("button").once("click", function() { 
    alert("You Clicked On A Button"); 
    }, "btnHandler"); 
} 

E io chiamarlo più volte

addBtnHandler(); 
addBtnHandler(); 
addBtnHandler(); 

Lo fa solo una volta.

Si noti che l'estensione funziona controllando sia l'uid che il tipo. Ciò significa che puoi associare diversi tipi di gestori con lo stesso uid, puoi o non vuoi questo. Per modificarlo, modifica.

var dataStr = type+"-handler-"+uid;

con qualcosa di simile

var dataStr = "handler-"+uid;

Answer 12

ero anche cercando di utilizzare e spegnere il metodo di jQuery per il legame evento solo una volta con l'elemento DOM che non esiste ancora o dom l'elemento non è stato ancora creato.

$('.select').off('event').on('event', 'selector', function(e){ // }); 

Questo codice non funzionava correttamente

mi sono imbattuto in un metodo molto redditizio che è il metodo di 'uno'. È molto utile quando vuoi associare un evento solo una volta.

È possibile trovare il documento qui http://api.jquery.com/one/

Questo è lo stesso metodo di 'on', ma diverso con il suo comportamento con non attaccare con l'evento per più selettori.

$('body').one('click', 'selector', function(){ // do your stuff here }); 

Answer 13

È possibile raggiungere questo obiettivo con puro JS, utilizzando addEventListener metodo e la sua volta opzione

target.addEventListener('click', handler, {once: true});