jquery - 图像滑块在 ajax 加载的内容中不起作用

Question

jQuery(document).ready(function($) {
var $mainContent = $("#main_class"),
    siteUrl = "http://" + top.location.host.toString(),
    url = ''; 
$(document).delegate("a[href*='/classes/']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/]):not([href$=/event-registration/])", "click", function() {
    location.hash = this.pathname;
    return false;
}); 

$(window).bind('hashchange', function(){
    url = window.location.hash.substring(1); 
    if (!url) {
        return;
    } 
    url = url + " #main"; 
    $mainContent.animate({opacity: "0.1"}).html('Please wait...').load(url, function() {
        $mainContent.animate({opacity: "1"});
    });
});
$(window).trigger('hashchange');
$('#slider').royalSlider({            
           imageAlignCenter:true,
           imageScaleMode: "fill",
});

});

ajax 内容工作完美，但是当我将内容加载到 ajax div 时，滑块（皇家滑块）不起作用。如何修改代码以实现皇家滑块。我使用 wordpress 和定制设计的主题。

Answer 1

如果没有一些上下文和一些 HTML 代码，我无法确定，但我认为您需要$('#slider').royalSlider(...);在加载新内容后再次调用。

当你第一次调用这个函数时，你的目标是#slider当前在 DOM 中。当您使用 ajax 调用加载新内容时，您删除了此元素并将其替换为新元素。我相信你只需要再次初始化你的滑块。