通過AJAX加載圖像滑塊

Question

我試圖通過AJAX加載圖像滑塊。當輸入包含滑塊的頁面的直接url時，它可以正常工作。但是當試圖通過AJAX加載時，它不會加載。

$('.ajaxed').live('click', function(event) { // loading page via AJAX 
    event.preventDefault(); 
    var link = $(this).attr('href')+' #content'; // jQuery address variables 
    var rewritepath = link.replace($url,'').replace(' #content',''); // jQuery address variables 
    $('#board').load(link,'', function(){ 
     $('html,body').delay(500).animate({scrollTop: 0}, 300, function() { 
      $('#board').slideDown('slow'); 
     }); 
    }); 
    $.address.state($path).crawlable(true).value(rewritepath); // jQuery address 
    return false; 
}); 
$slider.royalSlider({ 
    captionShowEffects:["fade"], 
    controlNavThumbs:true, 
    controlNavThumbsNavigation:true,   
    imageAlignCenter:true, 
    imageScaleMode: "fill", 
    welcomeScreenEnabled:false, 
    hideArrowOnLastSlide:true, 
    autoScaleSlider: true, 
    autoScaleSliderWidth: 980, 
    autoScaleSliderHeight: 650 
}); 

如果我把滑塊代碼到只使用AJAX，但不是當直接加載頁面的運作.ajaxed部分。

Answer 1

您可以將滑塊init代碼放入函數中，然後可以從任何地方調用它。例如：

$('.ajaxed').live('click', function(event) { // loading page via AJAX 
    event.preventDefault(); 
    var link = $(this).attr('href')+' #content'; // jQuery address variables 
    var rewritepath = link.replace($url,'').replace(' #content',''); // jQuery address variables 
    $('#board').load(link,'', function(){ 
     $('html,body').delay(500).animate({scrollTop: 0}, 300, function() { 
      $('#board').slideDown('slow'); 
     }); 
     init_slider(); 
    }); 
    $.address.state($path).crawlable(true).value(rewritepath); // jQuery address 
    return false; 
}); 

init_slider(); 

function init_slider() { 
    $slider.royalSlider({ 
     captionShowEffects:["fade"], 
     controlNavThumbs:true, 
     controlNavThumbsNavigation:true,   
     imageAlignCenter:true, 
     imageScaleMode: "fill", 
     welcomeScreenEnabled:false, 
     hideArrowOnLastSlide:true, 
     autoScaleSlider: true, 
     autoScaleSliderWidth: 980, 
     autoScaleSliderHeight: 650 
    }); 
}