jQuery append() no trabajan en elementos añadidos dinámicamente

Question

Considere el código HTML

<ul> 
    <li>Default item</li> 
    <li>Default item</li> 
</ul> 
<button>Append</button> 

y el código de jQuery

$('button').live('click', function(){ //This action is done by an external script. 
    $('ul').append('<li>Added item</li>'); 
}); 

$('ul li').append('<b> x</b>'); // This action is done by me 

Lo que pasa es que necesito para añadir la marca "x" para todos los recién elementos añadidos a la dom.

En este caso, solo los elementos predeterminados se anexan con la marca "x".

Los elementos añadidos recientemente no se añaden con "x".

¡Estoy seguro de que el trabajo será simple, pero no puedo hacerlo bien!

ejemplo vivo - http://jsfiddle.net/vaakash/LxJ6f/1/

Answer 1

Su código se ejecuta de inmediato, y así, por supuesto, sólo tiene acceso a los elementos que ya existen. El código que agrega nuevos elementos de la lista se ejecuta más tarde, cuando el usuario hace clic en algo. Tendrás que engancharte a ese proceso también.

Una forma es conectar el mismo evento que son y ejecutar el código desde el controlador de eventos. Asegúrese de conectar el evento después de.

Su código:

$('button').live('click', function(){ 
    $('ul').append('<li>Added item</li>'); 
}); 

Su código (después de ellos):

$('button').live('click', markButtons); 

markButtons(); 

function markButtons() { 
    $('ul li:not(.marked)') 
     .addClass("marked") 
     .append('<b> x</b>'); 
} 

Updated fiddle

La razón por la que dije el código necesita para hacer su conexión después su El código es que jQuery garantiza el orden de las llamadas a los controladores de eventos: cuando el ev ent ocurre, los manejadores se llaman en el orden en el que se adjuntaron. Al conectar su controlador después de que ellos adjunten el suyo, usted garantiza que se llame a su controlador después de que el suyo haya hecho su trabajo.

Si usted está preocupado acerca de la orden se mezclen, siempre se puede retrasar un poco su código:

$('button').live('click', function() { 
    setTimeout(markButtons, 0); 
}); 

De esta manera, el código se garantiza la ejecución después de que todos los controladores de eventos conectados a la click se han ejecutado.

Answer 2

usted tiene que repetir el código "x" en el controlador de eventos:

$('button').live('click', function(){ //This action is done by an external script. 
    $('ul').append(
     $('<li>Added item</li>').append('<b>x</b>') 
    ); 
}); 

Por supuesto, también puede simplemente poner la negrita "x" justo en el <li> cuando se lo añaden ...

edit Si no puede cambiar el controlador de clic, entonces lo único que puede hacer es sondear el DOM o intentar algo como @TJ Crowder sugiere (que creo que debería funcionar bien).

Answer 3

¿Por qué no solo hacerlo en el apéndice inicial?

$('button').live('click', function(){ //This action is done by an external script. 
    $('ul').append('<li>Added item<b> x</b></li>'); 
}); 

---

Dado que parece que usted no tiene acceso a la secuencia de comandos que se hace la anexados, se pudo enlazar su propio controlador.

$('button').live('click', function(){ //This action is done by an external script. 
    setTimeout(function() { 
     $('ul li:not(li:has(b))').append('<b> x</b>'); 
    }, 10); 
}); 

Esto seleccionará li elementos que actualmente no tienen un b elemento anidado, y se añadirá una.

Lo puse en un setTimeout ya que es posible que no pueda garantizar el orden de ejecución de los manipuladores.

Si prefiere selectores CSS válidos, debe hacerse lo siguiente:

$('ul li').not($('li b').closest('li')).append('<b> x</b>'); 

o esto:

$('ul li').not(function() { return $(this).find('b').length; }).append('<b> x</b>'); 

---

JSFIDDLE DEMO que muestra las dos manejadores diferentes.