Estoy añadiendo contenido a una lista mediante:

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

Quiero realizar más funciones a la anexa contenido (cambio de clase, aplicar animaciones, etc)

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

InformationsquelleAutor user342391 | 2010-06-24

4 Comentarios

  1. 26

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

    Imaginar 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 se puede simplemente almacenar el resultado y el trabajo en su lugar:

    $('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 sugiero que en lugar de mofiying el CSS como el que acaba de agregar una clase a su clonado li como este:

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

    A continuación, el programa de instalación de algunos estilos como:

    .new-item img, .new-item li { height: 40px; width: 40px; }
    .new-item h5 { display: none }
    • Hmm.. el 2do ejemplo sería todavía el fuego apagado de forma asincrónica y no funciona en la mayoría de los casos cuando se necesita la devolución de llamada a suceder después el appendTo
    • No estoy seguro de entender lo que asynch significa que @Trip — Todo lo que el código anterior es la sincronía. No hay llamadas asincrónicas en este código. Incluso la devolución de llamada en el interior de cada uno es todavía sincrónicas, es llamado inmediatamente. La única diferencia en el ejemplo es que la primera se crea un nuevo ámbito en el interior de cada uno que usted puede tener para almacenar variables para cada elemento coincidente, de lo contrario, se debe trabajar de forma idéntica.
    • Yo estaba equivocado! Gracias 🙂
    • No están del todo equivocados, el appendTo ocurre de manera asincrónica, porque el resto de la devolución de llamada no espere a que el DOM DOM… operaciones son a menudo más rápido, a continuación, la secuencia de comandos aunque..
    • odio a reventar su burbuja, pero la appendTo es también de sincronización. No de la pintura hasta el final del fotograma actual, pero sucede de inmediato. Si usted accede al elemento de la matriz, será que UL, si intenta obtener acceso a él css va a causar un reflujo, etc. Confía en mí (leído mi perfil), o de investigación por sí mismo.
    • También, DOM operaciones a menudo son el cuello de botella en el rendimiento de JavaScript, no son, por cualquier medio rápido…
    • Tengo un pregunta abierta relacionado con un encadenado addClass() no disparo de una transición de CSS. Usted parece estar bien informados sobre jQuery, la sincronicidad y la representación en el explorador; ¿te importaría echar un vistazo (en particular a mi comentario sobre esta respuesta)? Gracias.

  2. 15

    Por desgracia, la adición de las devoluciones de llamada de dom operaciones no es algo que se puede hacer en una casa de moda el uso de javascript. Por esta razón no está en la biblioteca jQuery. Un settimeout con el temporizador «1ms» sin embargo siempre se pone a la función en el settimeout en la parte inferior de la pila de llamadas. Esto hace el trabajo! El underscore.js la biblioteca utiliza esta técnica en _.aplazar, que hace exactamente lo que usted desea.

    $('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);
    });
    • DOM Operaciones de sincronización, no hay ninguna razón para _.defer nada
    • Gracias, eso es exactamente lo que yo necesitaba! En mi caso fue anexando html entidad a un contenedor, que la unión de un evento. Estado luchando para hacer que funcione por un tiempo…
    • Impresionante! No es la solución más obvia he corrió, pero funciona 🙂
  3. 4

    Usted puede mantener el encadenamiento de operaciones en el punto y coma.

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

    etc

    • ¿Cómo puedo aplicar esto en una cadena: $(this).find(‘h5’).remove(); $(this).find(‘img’).css(‘altura’,’40px’, ‘ancho’,’40px’ ); $(this).find(‘li’).css(‘altura’,’60px’, ‘ancho’,’40px’ );
    • Esto no ayuda, la pregunta es cómo usted puede solicitar una devolución de llamada después de la anexión se realiza la operación. DOM operaciones se realizan de forma asincrónica. Así que en la siguiente parte de la cadena, el que se anexa el contenido no es aún visible.
  4. 0

    En jquery usted podría utilizar $() justo después de su anexar contenido del código. De esta manera usted puede estar seguro de que el contenido está cargado y el DOM esté listo antes de realizar cualquier tipo de tareas en el que se anexa el contenido.

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

    $() llama a una función que cualquiera de los registros de un DOM-listo de devolución de llamada (si se pasa una función), o devuelve los elementos del DOM (si el selector de cadena o elemento es pasado)

    Usted puede encontrar más información aquí

    la diferencia entre $ y $() en jQuery

    http://api.jquery.com/ready/

Dejar respuesta

Please enter your comment!
Please enter your name here