基本 jQuery 滑块 (BJQS) 未将样式应用于 jQuery 和 XML 生成的 li 元素答案

【问题标题】：Basic jQuery Slider (BJQS) not applying styles to jQuery and XML generated li elements基本 jQuery 滑块 (BJQS) 未将样式应用于 jQuery 和 XML 生成的 li 元素
【发布时间】：2014-12-15 17:27:43
【问题描述】：

我正在尝试将 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 加载正常。

在我的身体里：

<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 内容有关，但我不会假装知道该怎么做。

任何帮助将不胜感激。

【问题讨论】：

标签： jquery html css xml

【解决方案1】：

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

所以我替换了这个：

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

有了这个：

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

【讨论】：