jquery - 通过 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
});

如果我将滑块代码放入 .ajaxed 部分，它只能使用 AJAX 而不是直接加载页面时。

Answer 1

你可以把滑块初始化代码放在一个函数中，然后你可以从任何你想要的地方调用它。例如：

$('.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
    });
}