Función de llamada después de .load (Jquery)

Tener un poco de dificultad para hacer que una función llame después de una carga:

$(function(){ $('a.pageFetcher').click(function(){ $('#main').load($(this).attr('rel')); }); }); 

La página se carga, pero las funciones no se activan:

 $(function(){ var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.box', }); }); $container.infinitescroll({ navSelector : '#page-nav', nextSelector : '#page-nav a', itemSelector : '.box', loading: { finishedMsg: 'Nothing else to load.', img: 'http://sofes.miximages.com/load/6RMhx.gif' } }, function( newElements ) { $.superbox.settings = { closeTxt: "Close this", loadTxt: "Loading your selection", nextTxt: "Next item", prevTxt: "Previous item" }; $.superbox(); var $newElems = $( newElements ).css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); }); } ); }); 

Intenté combinarlos para que las funciones de la 2da. Se llamen después de .load (después de hacer algunas búsquedas en este sitio y ver las respuestas / ejemplos dados), pero nada parece funcionar correctamente.

Sugerencias?

Para ejecutar algo de código después de que .load() un .load() , deberá poner el código en una función de finalización para el .load() . La operación de carga es asíncrona, por lo que la función de carga inicia la carga del contenido y luego regresa de inmediato y la ejecución de JS continúa (antes de que se complete la carga). Por lo tanto, si está intentando operar con el contenido recién cargado, aún no estará allí.

Como su código está escrito ahora, tiene dos bloques de código que se ejecutan cuando el documento HTML original está listo. El primer bloque inicia una operación .load() . La segunda operación espera que ya se .load() , pero aún no se ha completado, por lo que el contenido de la operación .load() aún no está disponible.

Es por eso que .load() toma una función de finalización como un argumento. Esa es una función que será llamada cuando la carga se haya completado. Consulte la documentación relevante de jQuery .load() para obtener más información. Así es como se vería tu código con una función de finalización.

 $(function(){ $('a.pageFetcher').click(function(){ $('#main').load($(this).attr('rel'), function() { // put the code here that you want to run when the .load() // has completed and the content is available // Or, you can call a function from here }); // the .load() operation has not completed here yet // it has just been started }); }); 

Su primer punto de referencia siempre debe ser la API de jQuery , esto es lo que la página de API en .load () le informa sobre los parámetros que toma la función de carga:

.load (manejador (eventObject))

.load ([eventData], manejador (eventObject))

En este caso, está pasando $(this).attr('rel') como eventData, por lo que agrega su controlador de eventos después de eso:

 $('#main').load($(this).attr('rel'), onNewMainContent); 

En su segundo bloque de código, le está diciendo a jQuery que lo ejecute cuando su cuerpo se carga, no cuando carga más en su sitio. Necesita ejecutarlo específicamente, así que cambie el inicio de esa función para:

 function onNewMainContent { // new var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.box', // ... 

también puede usar el botón de carga bootstrap para activar .load () y la función después de .load ()

HTML

  

JQUERY

  $("#refresh").click(function() { var $this = $(this); $this.button('loading'); $("#container").load("/showemails.aspx?page=1 #container", function() { $("#refresh").button('reset'); }); return false; }); 
Intereting Posts