jQuery: ¿Hay alguna manera de "actualizar" los manejadores de eventos?

Question

Tengo dos divs, uno que contiene algunas cosas y el otro con todas las cosas posibles. Al hacer clic en uno de los divs se transferirán ítems al otro div. El código que se me ocurrió es:

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

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

Esta funciona perfectamente, excepto que los controladores de eventos deben ser refrescado una vez añado o elimino elementos. Lo que quiero decir es que, si primero hago clic en un elemento, se agrega al otro div, pero si vuelvo a hacer clic en este elemento, no pasa nada. Puedo hacerlo manualmente, pero ¿hay una mejor manera de lograr esto?

Answer 1

Pruebe jquery live events .. $ .live (nombre de evento, función) se vinculará a cualquier elemento actual que coincida con los elementos añadidos a la Dom en el futuro mediante la manipulación de javascript.

ejemplo:

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

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

Importante:

Tenga en cuenta que $.live ya ha sido despojado de jQuery (1.9 en adelante) y que en su lugar debe usar $.on.

Le sugiero que consulte this answer para obtener un ejemplo actualizado.

Answer 2

¿Ha mirado la función live de jQuery?

Answer 3

EDITAR: no utilizar en vivo, se desaprobará!

Aproveche el hecho de que los eventos burbujean. Usando .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); 
    }); 
}); 

cualquier clic en cualquier elemento (existente en el momento de aprieto o no) se burbujear (suponiendo que no haya capturado manualmente el evento y dejado de propagación). Por lo tanto, puede usar ese event delegation para vincular solo dos eventos, uno en cada contenedor. Cada clic que pasó la prueba de selección del segundo argumento (en este caso, > *, eliminará que elemento y luego añadirlo al contenedor alternativo como accesesed por things.eq(Number(!index))

Answer 4

Aquí tiene, utilizando la más intuitiva 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

en primer lugar, es obsoleto live en segundo lugar, la actualización no es lo que quiere Sólo tiene que conectar el controlador de clic a la fuente de derecho, en este caso: el documento

Wh. es usted

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

el controlador de clic se adjunta al documento. Cuando se carga la página, el controlador de clic se adjunta a una instancia específica de un elemento. Cuando la página se vuelve a cargar, esa instancia específica se ha ido para que el controlador no registre ningún clic. Pero la página permanece así que conecte el manejador de clic al documento. Simple y fácil.