Jquery: Ejecutar script después de ajax load ()

Estoy usando la función load () para obtener detalles dinámicamente de diferentes páginas haciendo clic en los botones del menú. Uno de los botones apunta a una galería de imágenes que utiliza sus propios efectos de jQuery. Pero esos scripts no se están ejecutando. Intenté cargarlos explícitamente usando getscript () pero tampoco funciona. Aquí está el código:

$(document).ready(function() { var hash = window.location.hash.substr(1); var href = $('#nav li a').each(function(){ var href = $(this).attr('href'); if((hash==href.substr(0,href.length-4))&&(hash!='')){ var toLoad = hash+'.php #content'; $('#content').load(toLoad); } }); $('#nav li a').click(function(){ var toLoad = $(this).attr('href')+' #content'; $('#content').hide(); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); $('#content').load(toLoad,showNewContent()); function showNewContent() { $('#content').fadeIn(1000); $.getScript("gallery.js"); } return false; }); }); 

Aquí está el contenido de mi archivo gallery.js. El efecto exacto puede ser irrelevante, he pegado debajo del código para mostrar la posición de mis cajas de alerta:

 $(document).ready(function(){ //perform actions when DOM is ready var z = 0; //for setting the initial z-index's var inAnimation = false; //flag for testing if we are in a animation alert("1"); $('#pictures img').each(function() { //set the initial z-index's z++; //at the end we have the highest z-index value stored in the z variable $(this).css('z-index', z); //apply increased z-index to  alert("2"); }); function swapFirstLast(isFirst) { if(inAnimation) return false; //if already swapping pictures just return else inAnimation = true; //set the flag that we process a image var processZindex, direction, newZindex, inDeCrease; //change for previous or next image alert("3"); if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action $('#pictures img').each(function() { //process each image alert("4"); if($(this).css('z-index') == processZindex) { //if its the image we need to process $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height) $(this).css('z-index', newZindex) //set new z-index .animate({ 'top' : '0' }, 'slow', function() { //animate the image back to its original position inAnimation = false; //reset the flag }); }); } else { //not the image we need to process, only in/de-crease z-index $(this).animate({ 'top' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one }); } }); return false; //don't follow the clicked link } $('#next1 a').click(function() { alert("5"); return swapFirstLast(true); //swap first image to last position }); $('#prev1 a').click(function() { alert("6"); return swapFirstLast(false); //swap last image to first position }); }); //Function for z-index based gallery ends here 

Esto es lo que encontré:

Hago un ctrl + F5 y cargo la página desde el inicio, y hago clic en el botón de galería. Me sale alerta “1”. Las imágenes se cargan, pero la animación no funciona.

Vuelvo a hacer clic en el botón de la galería, sin actualizar, y recibo todas las alertas apropiadas de 1 a 6 y el efecto funciona como un encanto.

Cuando el efecto no funciona, simplemente coloco el contenido de gallery.js en la consola de Chrome y hago clic en entrar, y el efecto vuelve a funcionar perfectamente.

Además, hay ocasiones en que los efectos no funcionan a pesar de repetir exactamente los pasos anteriores. Cual podría ser el problema aquí? Escuché que el método getscript es asíncrono e incluso intenté desactivar la sincronización ajax, pero todavía obtengo resultados impredecibles.

Descubrí que a pesar de llamar a getScript () como una callback para cargar () , la secuencia de comandos que cargaba “antes” del contenido podía desordenar el flujo. En lugar de llamar a showNewContent () como una callback, necesitaba llamar a showNewContent, es decir, un puntero a la función (sin paréntesis), para que esperara a que se completara la carga. El siguiente código lo resolvió:

 $('#content').load(toLoad,showNewContent); function showNewContent() { $('#content').fadeIn(1000); $.getScript("gallery.js"); } 

En tu galería js reemplazar

 $(document).ready(function(){ 

con

 MyGallery=function(){ 

En guión principal:

 var MyGallery=function(); $(document).ready(function() { 

….

….

  function showNewContent() { $('#content').fadeIn(1000); $.getScript("gallery.js",{success: MyGallery}); } 

….

….

No estoy seguro de qué fue lo que causó que hicieras esas cosas, mejor revisa la idea de tu flujo de código …