图像滑块不适用于ajax内容加载器

Question

当与我的ajax内容加载器结合使用时，我的图像滑块不起作用，但滑块单独工作。当我在我的网站上尝试它时，图片滑块仅在刷新页面时才起作用。任何想法为什么这些不一起工作？

$(document).ready(function() { 

//menu loader 
$('.n3').click(function() { 
    $('#secNav').toggle(); 
    return false; 
}); 
$('.n1 a, .n2 a, .n4 a').click(function() { 
    $('#secNav').hide(); 
}); 


//content loader in portfolio div  
var hash = window.location.hash.substr(1); 
var href = $('.n1 a, .n2 a, .n4 a, #secNav a').each(function(){ 
    var href = $(this).attr('href'); 
    if(hash==href.substr(0,href.length-5)){ 
     var toLoad = hash+'.html #portfolio'; 
     $('#portfolio').load(toLoad) 
    }           
}); 

$('.n1 a, .n2 a, .n4 a, #secNav a').click(function(){ 

var toLoad = $(this).attr('href')+' #portfolio'; 
$('#portfolio').fadeOut("fast",loadContent); 
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
function loadContent() { 
    $('#portfolio').load(toLoad,'',showNewContent()) 
} 
function showNewContent() { 
    $('#portfolio').fadeIn("1000"); 
} 
return false; 
}); 


//active link diff color 

    $("#nav a").click(function() { 
       $("#nav a").css("color", "#000"); 
       $(this).css("color", "#85f1f5"); 
      }); 

$("#secNav a").click(function() { 
       $("#secNav a").css("color", "#000"); 
       $(this).css("color", "#ff2712"); 
      }); 

$("#nav a").click(function() { 
       $("#secNav a").css("color", "#000"); 
      }); 




//end of doc ready 
}); 


//image slider 

$(window).load(function(){ 

// We are listening to the window.load event, so we can be sure 
// that the images in the slideshow are loaded properly. 


// Testing whether the current browser supports the canvas element: 
var supportCanvas = 'getContext' in document.createElement('canvas'); 

// The canvas manipulations of the images are CPU intensive, 
// this is why we are using setTimeout to make them asynchronous 
// and improve the responsiveness of the page. 

var slides = $('#slideshow li'), 
    current = 0, 
    slideshow = {width:0,height:0}; 

setTimeout(function(){ 

    window.console && window.console.time && console.time('Generated In'); 

    if(supportCanvas){ 
     $('#slideshow img').each(function(){ 

      if(!slideshow.width){ 
       // Taking the dimensions of the first image: 
       slideshow.width = this.width; 
       slideshow.height = this.height; 
      } 

      // Rendering the modified versions of the images: 
      createCanvasOverlay(this); 
     }); 
    } 

    window.console && window.console.timeEnd && console.timeEnd('Generated In'); 

    $('#slideshow .arrow').click(function(){ 
     var li   = slides.eq(current), 
      canvas  = li.find('canvas'), 
      nextIndex = 0; 

     // Depending on whether this is the next or previous 
     // arrow, calculate the index of the next slide accordingly. 

     if($(this).hasClass('next')){ 
      nextIndex = current >= slides.length-1 ? 0 : current+1; 
     } 
     else { 
      nextIndex = current <= 0 ? slides.length-1 : current-1; 
     } 

     var next = slides.eq(nextIndex); 

     if(supportCanvas){ 

      // This browser supports canvas, fade it into view: 

      canvas.fadeIn(function(){ 

       // Show the next slide below the current one: 
       next.show(); 
       current = nextIndex; 

       // Fade the current slide out of view: 
       li.fadeOut(function(){ 
        li.removeClass('slideActive'); 
        canvas.hide(); 
        next.addClass('slideActive'); 
       }); 
      }); 
     } 
     else { 

      // This browser does not support canvas. 
      // Use the plain version of the slideshow. 
      current=nextIndex; 
      next.addClass('slideActive').show(); 
      li.removeClass('slideActive').hide(); 
     } 
    }); 

},100); 

// This function takes an image and renders 
// a version of it similar to the Overlay blending 
// mode in Photoshop. 
// **NOTE: REMOVED COLOR CHANGES 

function createCanvasOverlay(image){ 

    var canvas   = document.createElement('canvas'), 
     canvasContext = canvas.getContext("2d"); 

    // Make it the same size as the image 
    canvas.width = slideshow.width; 
    canvas.height = slideshow.height; 

    // Drawing the default version of the image on the canvas: 
    canvasContext.drawImage(image,0,0); 


    // Taking the image data and storing it in the imageData array: 
    var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height), 
     data  = imageData.data; 

    // Putting the modified imageData back to the canvas. 
    canvasContext.putImageData(imageData,0,0); 

    // Inserting the canvas in the DOM, before the image: 
    image.parentNode.insertBefore(canvas,image); 
} 

//end of window load  
}); 

Answer 1

如果要更换一个滑块元件换一个新的与你的AJAX，你必须重新初始化滑块的代码在新的HTML工作

伪代码示例

$('#sliderWrapper').load( url, function(){ 

    /* new html exists, run all pertinent slider code*/ 
}) 

它如果你删除所有不相关的代码（如导航代码等）来理清你的具体问题是什么，将会有很大的帮助。这不是很清楚哪些部分是滑块相关

另外，还要确保你不会再加载jQuery和消灭原来的jQuery对象