jquery - 图像 slider 在 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 时， slider (皇家 slider )不起作用。我如何修改代码来实现皇家 slider 。我正在使用 WordPress 和定制设计的主题。

Answer 1

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

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