2009-12-14 11 views
10

tengo un código que se une en acción de clic en la carga de la página, es un enlace. Cuando hago clic en él, envía una solicitud ajax y reemplaza el contenido en algún div con la función jquery append(). Este nuevo contenido tiene un enlace y debo vincular algunas acciones para ellos, pero no pude ... obligarlo a funcionar, creo, porque jquery append no actualiza el árbol DOM. ¿Cómo podría obtener un enlace atrasado?jquery enlace tardío

Respuesta

11

Enlace tardío ya está disponible mediante la utilización de eventos en vivo de jQuery():

$('a.my-links-class').live('click', function() { 
    // do your link action here 
}); 
+0

Esto acaba de hacer mi día. vivir() es increíble! – AnApprentice

+8

Debería utilizar 'on()' en lugar de 'live()'. – Broxzier

2

Debe usar la función live de jQuery, que vinculará un evento a todos los elementos que coinciden con un selector, sin importar cuándo fueron creados.

2

Puede usar jQuery 1.3 función + 's $().live(event, function). $("a").live("click", myClickFunc) enlazará myClickFunc como $("a").click(myClickFunc) o $("a").bind("click", myClickFunc), pero los eventos se vincularán "en vivo", por lo que los elementos que se agreguen al DOM después de esa llamada de función también estarán vinculados. Puede eliminar eventos enlazados en vivo con $().die(). Para obtener más información sobre $(). Live, vea the documentation for it.

Otra opción sería tener una función para unir los elementos dado un contexto determinado (utilizando la función de selección $ se utiliza raramente segundo parámetro):

function myBindEvents(context) { 
    $("a", context).click(myClickFunc); 
} 

y llamar a que cada vez que se actualiza un elemento con AJAX :

$("<div>").load("...", "...", function(){myBindEvents(this);}); 

Espero que esto ayude. :)

5

.live() evento fue obsoleto de verions 1.9 up.

Para cualquier persona que utilice la versión posterior de Jquery pueden usar el evento .on(), funciona prácticamente de la misma manera.

14

Hay 3 funciones que pueden hacer esto:

  • $(selector).live(events, data, handler); - jQuery 1.3+ - versión desuso: 1,7, eliminado: 1,9 (reference)
  • $(document).delegate(selector, events, data, handler); - jQuery 1.4.3+ - A partir de jQuery 1.7, .delegate() ha sido reemplazado por el método .on(). (reference)
  • $(document).on(events, selector, data, handler); - jQuery 1.7+ - preferido (reference)

Es generalmente aconsejado utilizar on() y su uso es simple y probablemente manera preferente.

  1. El primer selector debe existir cuando se llama a la función y no se puede eliminar o el evento también desaparecerá (puede ser document).
  2. El primer parámetro es el evento (p."clic")
  3. El segundo parámetro es el selector al que desea vincular el evento.
  4. Entonces, finalmente puede agregar algunos datos personalizados y una función para el evento.

He aquí algunos ejemplos de código:

// Make sure the DOM is ready 
$(function() { 
    // Bind the click event to the function 
    $(document).on("click", "a.class", function(event) { 
     // Put your code here. 
    }); 
}); 
+0

Brillante! Me pregunto por qué esto no funciona: $ (función() { $ ('. Clase'). On ("clic", "a", función (evento) { // Ponga aquí su código. }); }); – Narayana

+0

¿Está buscando un elemento 'a' dentro de otro elemento con clase' clase'? – Broxzier

+0

Sí ... Pensé que '$ ('. Class1')' seleccionará todos los elementos con una clase de 'clase1',' 'a" 'seleccionará las etiquetas de anclaje y vinculará el manejador de eventos. ¿No? – Narayana

4

Método .live en JQuery 1.9 es deprecated.So ahora u puede hacer así:

$("body").on("click", ".classname", function() { ... }) 
Cuestiones relacionadas