jquery - Basic jQuery Slider (BJQS) 未将样式应用于 jQuery 和 XML 生成的 li 元素

Question

我正在尝试将 Basic jQuery Slider 与由另一段 jQuery 和一些 XML 生成的列表一起使用，但我发现 BJQS 不想将样式应用于正在生成的 li 元素，因此它们'没有被隐藏和淡入。

进入文件头我有:

<link rel="stylesheet" href="/assets/css/bjqs.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/assets/js/bjqs-1.3.min.js" type="text/javascript">

无论如何，所有这些都是 bjqs 所需要的，并且根据 Firebug 可以正常加载。

在我的 body 里:

<script>
jQuery(document).ready(function(){
  jQuery.ajax({
    type: "GET",
    url: "images-revision.xml",
    dataType: "xml",
    success: parseXml
  });
});

function parseXml(xml) {
    var path = jQuery(xml).find('path').text();

    jQuery(xml).find("image").each(function() {
        jQuery(".bjqs").append("<li><img src='" + path + jQuery(this).find("filename").text() + "'/></li>");
    }); 
}
</script>

它从 XML 文件中的图像列表中读取，然后将它们列在 BJQS 中。

然后我有了载玻片容器:

<div id="banner-fade">
    <ul class='bjqs'>
    </ul>
</div>

后面是我想用来控制幻灯片的参数:

<script>
    jQuery(document).ready(function(jQuery) {
        jQuery('#banner-fade').bjqs({
            height      : 198,
            width       : 956,
            automatic : true, // automatic
            showcontrols : false, // show next and prev controls
            usecaptions : false, // show captions for images using the image title tag
            responsive : false, // enable responsive capabilities
            showmarkers : false, // Show individual slide markers
            // animation values
            animtype : 'fade', // accepts 'fade' or 'slide'
            animduration : 750, // how fast the animation are
            animspeed : 5000, // the delay between each slide
        });
    });
</script>

正确的样式被应用到#banner-fade 和 ul.bjqs，但不是生成的 li 元素，它们是隐藏和显示以在图像之间旋转的部分。

我感觉这与在创建 lis 之前调用 BJQS 相关，但我不会假装知道该怎么做。

如有任何帮助，我们将不胜感激。

Answer 1

解决了，在窗口加载时使用 http://api.jquery.com/load-event/而不是为具有 bjqs 参数的部分准备好文档修复了此问题。

所以我替换了这个:

jQuery(document).ready(function(jQuery) {
  jQuery('#banner-fade').bjqs({

有了这个:

jQuery(window).load(function() {
  $('#banner-fade').bjqs({