Refire ready event después de la recarga de AJAX

Question

He investigado otros hilos y estoy confundido.

Situación: Estoy suministrando un plugin jQuery genérico que carga el div que el usuario especifica dinámicamente a través de AJAX. Todo funciona bien, pero en, por ejemplo, En la página de un usuario, hay una pieza de JS que no se llama, porque el evento "listo" no se renovó.

La situación habitual será que las otras cosas jQuery del usuario se colocarán después de jQuery (documento) .ready. vocación

que he acabo de probar:

$(document).trigger('ready'); 

manualmente - no tiene efectos en absoluto, ya que supongo que "listo" se llama sólo una vez y sólo una vez.

¿Cuál es la forma correcta de manejar la situación? (que sería grande para proporcionar la solución más genérica posible)

me encantaría hacer algo como se sugiere en este tema:

Trigger $document.ready (so AJAX code I can't modify is executed)

Pero creo que readyList ahora es privada y puede ¿Ya se te puede manipular directamente?

Vale la pena mencionar que el complemento que proporciono proporciona una funcionalidad de devolución de llamada para el usuario. Por supuesto, (s) podría colocar allí el código JS de manejo posterior a la carga.

Gracias de antemano y saludos cordiales

Answer 1

no debe intentar volver a cargar toda la función de lista de DOM. Particularmente dañino es la naturaleza n + n de los eventos. Si lo hiciera, los eventos de 2 clics en el mismo elemento, por ejemplo, podrían convertirse en 4, luego 8, etc. si la función DOM ready es repetidamente activada por ellos.

Puede evitar esto sacando el código que necesita ejecutar una vez que haya terminado con su llamada ajax y, presumiblemente, la población del elemento que espera que se beneficie del evento que desea reinicializar .

$(document).ready(function() 
{ 
    initialise(); 

    //... Resume with DOM ready 
}); 

function initialise() 
{ 
    // create event here that needs re-initialising 
} 

Así que cuando haya terminado con su llamada AJAX simplemente llamar initialise() nuevo.

Como alternativa, mire a usar .on y usando sus capacidades de burbujeo, así es como manejaría este tipo de problema. Evita tener que pensar alguna vez en "reinicializar" cualquier parte de las funciones listas para DOM en sus scripts.

adicional de los comentarios

.on le permite enlazar eventos a elementos de bajo nivel en la página que no cambian en cualquier momento, mientras que le permite controlar cuál de los elementos dinámicos en realidad desencadenar el evento dentro de ese envase.

<div id="container"> 

    <div id="ajax-content"> 

     <a href="#" class="created-link">A new link</a> 

    </div> 

</div> 

por lo que sabemos que el <a> es creado por una función ajax después del evento listo DOM se dispararon, por lo tanto, cualquier evento directos que se le aplican a continuación, no funcionarían.

En lugar de ello, vincularíamos el evento a un elemento de nivel inferior sin cambios y repasaríamos hasta el elemento DOM dinámico que contiene.

$('#container').on('click', '.created-link', function(event) 
{ 
    event.preventDefault(); 

    // Your normal onclick code 
}); 

Answer 2

Parece que el enlace con # como href no funciona. Solo ocúpate de esto. :)

Answer 3

solo para compartir mis hallazgos y la solución, tuve el mismo problema que después de una recarga de AJAX la función $ (documento) .ready no se llama para este problema he utilizado combinaciones de estas dos respuestas, y en al final encontró una solución muy simple

• from this thread the answer from David Barker
• from another thread the answer from Nick Young

Mi solución tiene este aspecto

<script type="text/javascript"> 
function initialise(){ 
    $('.clickableItem').click(function(){ 
     /* do code here */ 
     return false; 
    }); 
}; 
$(document).ready(function(){ 
    initialise(); 
}); 
$(document).ajaxComplete(function() { 
    initialise(); 
}); 
</script> 

espero que esto ayude a alguien