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
    });
}

通过AJAX加载图像滑块

1 个答案: