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 <img>
    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. Recibo la 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.