Cuando se agrega un li, ¿no se convierte en parte de la UL "de verdad"?

Tengo ahora este código:

<ul><li class="listitem">text<li></ul> 

jQuery:

 $('.listitem').click(function() { $("#elname").text($(this).text()); $('#slists').css('visibility','hidden') $('#elname').css('visibility','visible') $('#elname').css('display','inline-block') }); 

Se supone que esto oculta un div y lo hace, pero cuando agrego elementos al ul (con el elemento de list de la class) no ocurre nada con el elemento adjunto, la class que obtiene es correcta, el título y el valor también.

¿Puede esto tener algo que ver con el código anterior que está en la function de documento listo para hacer?

Utilice .live() lugar, así:

 $('.listitem').live('click', function() { $("#elname").text($(this).text()) .css({ visibility:'visible', display: 'inline-block' }); $('#slists').css('visibility','hidden') }); 

.live() escucha en el nivel de document para que su clic aparezca en burbuja … y los elementos nuevos y antiguos expresan este evento de la misma manera, por lo que no importa lo que se agregó más adelante, mientras que su controller .click() une un clic a los elementos que existían en el momento en que se ejecutó el selector .

Alternativamente, puede darle a su <ul> una ID o class y usar .delegate() esta manera:

 $('#myUL').delegate('.listitem', 'click', function() { $("#elname").text($(this).text()) .css({ visibility:'visible', display: 'inline-block' }); $('#slists').css('visibility','hidden') }); 

Esto produce less burbujas, por lo que es un poco más limpio en el lado del evento, lo captura en <ul> lugar de en el document .

Los events de clic se establecen una vez en todos los elementos en el DOM en el momento de la configuration. Agregar un elemento de list no regenerará estos elementos de clic.

Tendrá que usar la funcionalidad de events en vivo de jQuery para crear events de clic que se apliquen a elementos creados sobre la marcha.