change - Jquery: realice la devolución de llamada después de agregar

jquery on live events

Question

Estoy agregando contenido a una lista usando:

  $(''a.ui-icon-cart'').click(function(){
         $(this).closest(''li'').clone().appendTo(''#cart ul'');
  });

Deseo realizar más funciones para el contenido adjunto (cambiar clase, aplicar animaciones, etc.)

¿Cómo puedo realizar una devolución de llamada en esta función que me permita realizar funciones en los datos adjuntos?

Answer 1

Desafortunadamente, la adición de devoluciones de llamadas a las operaciones dom no es algo que se puede hacer de una manera ordenada mediante javascript. Por esta razón no está en la biblioteca jQuery. Sin embargo, un settimeout con el temporizador "1ms" siempre pone la función en el settimeout en la parte inferior de la pila de llamadas. ¡Esto funciona! La biblioteca underscore.js usa esta técnica en _.defer, que hace exactamente lo que usted quiere.

$(''a.ui-icon-cart'').click(function(){
    $(this).closest(''li'').clone().appendTo(''#cart ul'');
    setTimeout(function() {
        // The LI is now appended to #cart UL and you can mess around with it.
    }, 1);
});

Answer 2

En jquery, puede usar $ () justo después de su código de contenido adjunto. De esta forma, puede estar seguro de que el contenido está cargado y el DOM está listo antes de realizar cualquier tarea en el contenido adjunto.

$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});

$ () llama a una función que registra una devolución de llamada lista para DOM (si se le pasa una función) o devuelve elementos desde el DOM (si se le pasa un string o elemento selector)

Puedes encontrar más aquí
diferencia entre $ y $ () en jQuery
http://api.jquery.com/ready/

Answer 3

Puedes seguir encadenando más operaciones en el punto y coma.

$(this).closest(''li'').clone().appendTo(''#cart ul'').addClass(''busy'').fade(''fast'');

etc

Answer 4

jQuery''s .each() toma una función de devolución de llamada y la aplica a cada elemento en el objeto jQuery.

Imagina algo como esto:

$(''a.ui-icon-cart'').click(function(){
  $(this).closest(''li'').clone().appendTo(''#cart ul'').each(function() {
    $(this).find(''h5'').remove(); 
    $(this).find(''img'').css({''height'':''40px'', ''width'':''40px''});
    $(this).find(''li'').css({''height'':''60px'', ''width'':''40px''});
  });
});

También puedes simplemente almacenar el resultado y trabajar en él:

$(''a.ui-icon-cart'').click(function(){
  var $new = $(this).closest(''li'').clone().appendTo(''#cart ul'')
  $new.find(''h5'').remove(); 
  $new.find(''img'').css({''height'':''40px'', ''width'':''40px''});
  $new.find(''li'').css({''height'':''60px'', ''width'':''40px''});
});

También sugeriría que, en lugar de modificar el CSS de esa manera, simplemente agregue una clase a su li clonado de esta manera:

$(this).closest(''li'').clone().addClass("new-item").appendTo(''#cart ul'');

Luego configura algunos estilos como:

.new-item img, .new-item li { height: 40px; width: 40px; }
.new-item h5 { display: none }