jQuery: un modo per "aggiornare" i gestori di eventi?

Question

Ho due div, uno che contiene alcune cose e l'altro con tutte le cose possibili. Cliccando su una delle div trasferirai gli oggetti all'altra div. Il codice mi è venuto in mente è:

$("#holder > *").each(function() { 
    $(this).click(function(e) { 
     $(this).remove(); 
     $("#bucket").append(this); 
    }); 
}); 

$("#bucket > *").each(function() { 
    $(this).click(function(e) { 
     $(this).remove(); 
     $("#holder").append(this); 
     }); 
}); 

Questo funziona perfettamente, salvo che i gestori di eventi hanno bisogno di essere aggiornati una volta aggiungo o tolgo elementi. Quello che voglio dire è che, se per prima cosa clicco su un elemento, esso viene aggiunto all'altro div, ma se faccio di nuovo clic su questo elemento, non succede nulla. Posso farlo manualmente ma esiste un modo migliore per raggiungere questo obiettivo?

Answer 1

Prova jquery live events .. il $ .live (nome evento, funzione) si associa a tutti gli elementi correnti che corrispondono così come gli elementi aggiunti al Dom in futuro mediante la manipolazione di javascript.

esempio:

$("#holder > *").live("click", function(e) { 
     $(this).remove(); 
     $("#bucket").append(this); 
}); 

$("#bucket > *").live("click", function(e) { 
     $(this).remove(); 
     $("#holder").append(this); 
}); 

Importante:

Nota che $.live da allora è stato messo a nudo da jQuery (1.9 in poi) e che si dovrebbe invece usare $.on.

Suggerisco di fare riferimento a this answer per un esempio aggiornato.

Answer 2

Hai guardato la funzione live di jQuery?

Answer 3

MODIFICA: non utilizzare dal vivo, è deprecato!

Approfitta del fatto che la bolla degli eventi. Utilizzando .on():

var = function(el1, el2) { 

var things = $('#holder, #bucket'); 
things.each(function(index) { 
    // for every click on or in this element 
    things.eq(index).on('click', '> *', function() { 
    // append will remove the element 
    // Number(!0) => 1, Number(!1) => 0 
    things.eq(Number(!index)).append(this); 
    }); 
}); 

qualsiasi click su qualsiasi elemento (esistente al momento di bind o meno) si bolla (ammesso che non è stato catturato manualmente l'evento e si fermò di propagazione). Pertanto, è possibile utilizzare quello event delegation per associare solo due eventi, uno su ciascun contenitore. Ogni click che ha superato la prova di selezione del secondo argomento (in questo caso, > *, rimuoverà che elemento e quindi aggiungere al contenitore alternativo come accesesed da things.eq(Number(!index))

Answer 4

Qui si va, utilizzando il più intuitivo delegate API: ..

var holder = $('#holder'), 
    bucket = $('#bucket'); 

holder.delegate('*', 'click', function(e) { 
    $(this).remove(); 
    bucket.append(this); 
}); 

bucket.delegate('*', 'click', function(e) { 
    $(this).remove(); 
    holder.append(this); 
}); 

Answer 5

in primo luogo, live è deprecato in secondo luogo, rinfrescante, non è ciò che si vuole Hai solo bisogno di collegare il gestore clicca per fonte giusta, in questo caso: il documento

Wh. it you do

$(document).on('click', <id or class of element>, <function>); 

il gestore di clic è allegato al documento. Quando la pagina viene caricata, il gestore di clic è collegato a un'istanza specifica di un elemento. Quando la pagina viene ricaricata, quell'istanza specifica viene eliminata, in modo che il gestore non stia registrando alcun clic. Ma la pagina rimane in modo da collegare il gestore di clic al documento. Semplice e facile.