Digamos que tengo este código:

$(document).ready(function()
{
   $(".foo").click(processFooClick);
}

Una vez que el documento se ha cargado, a través de JavaScript agrego dinámicamente un nuevo div con clase foo al documento:

$("body").append( "<div class='foo'>click..</div>");

¿Este nuevo div también tendría el controlador de eventos aplicado automáticamente, o tendría que ejecutar el código de configuración del evento ($ (". Foo"). Haga clic (...)) nuevamente?

¿Usaría la función jquery live ayudaría con esto? ¿Si es así, cómo?

3
Click Upvote 24 sep. 2011 a las 01:21

6 respuestas

La mejor respuesta

Su primer método no funcionaría, eche un vistazo a este jsFiddle: http://jsfiddle.net/esN4Q/

Pero, live haría:

$(".foo").live('click', processFooClick);

JsFiddle Ejemplo de jQuery live: http://jsfiddle.net/ePmXU/ (agregué un alerta emergente en el jsFiddle para que podamos ver si funciona cuando se hace clic).

1
Nathan 23 sep. 2011 a las 21:37

El nuevo div no tendrá el controlador de eventos adjunto. live permitirá que funcione como usted describió:

$(".foo").live('click', processFooClick);

Pero, simplemente agregaría el controlador de eventos al nuevo div nuevamente. No debe usar live a menos que realmente no controle cuándo se agregan nuevos elementos a la página.

2
Jordão 23 sep. 2011 a las 21:24

Cuando se agregan controladores de eventos, se agregan a los elementos mismos, por lo que agregar nuevos elementos coincidentes no dará como resultado que tengan los controladores de eventos. Creo que puedes reasignar los controladores.

El uso de .live () evita este problema: creo que los eventos (parafraseados) se manejan sobre la marcha, y si un elemento coincide, se aplica. Puede agregar elementos según sea necesario y manejarán cualquier evento que se haya aplicado a elementos coincidentes.

2
Surreal Dreams 23 sep. 2011 a las 21:25

Diría que probablemente necesite usar en vivo ya que su registro de evento de clic se realiza después de cargar los DOM. Cualquier DOM generado dinámicamente no obtendrá ese controlador de eventos, por lo que debe usar live. En este caso, algo como:

$(".foo").live('click', processFooClick);

O si tiene un alcance de contexto más estrecho:

$(".foo", $(someContext)[0]).live('click', processFooClick);
1
Long Ho 23 sep. 2011 a las 21:27

live funcionaría, pero su primer método no funcionaría (si agrega el div después de ejecutar la primera función click)

Si decide volver a llamar al clic, debe asegurarse de no agregar el controlador de clics dos veces a todos sus divs foo originales, o se ejecutarán dos veces

2
MattoTodd 23 sep. 2011 a las 21:35

Click () es un acceso directo para bind (). bind se adjuntará directamente a los elementos coincidentes. Eso significa que no, su nuevo elemento no tendrá un controlador. El uso de $ (". Foo"). Live (processClick) funcionará, porque live () funciona adjuntando un controlador al documento y capturando eventos burbujeados. También mire delegate () para obtener un tipo de controlador de eventos en vivo con más alcance.

2
InfinitiesLoop 23 sep. 2011 a las 21:25