Question

我的网页目前使用Slides

我希望能够动态地向我的滑块添加新的“幻灯片”。我这样做的方法是通过一个XML文档，其中包含指向“幻灯片图像”和href的链接。

我动态添加元素的jQuery代码是：

jQuery.ajax({
    type: "GET",
    url: "xml/slider_non_flash_images.xml",
    dataType: "xml",
    success: function(xml) {
        jQuery(xml).find('image').each(function() {
            var imagesrc = jQuery(this).find('src').text();
            var url = jQuery(this).find('href').text();
            var item = '<div><a href="' + url + '"><img src="' + imagesrc + '"/></a></div>';
            jQuery('.slides_container').append(item);
        });
    }
});

这一切都有效，并将div添加到包含div的幻灯片中。问题是，幻灯片不起作用。

如果我自己对容器中的<div>元素进行硬编码，那么它们就可以正常加载。

这可能是一个“时机”问题吗？在滑块试图运行后加载元素的位置？如果是这样，我怎么能在之前添加它们。这一切都发生在(document).ready方法中。有更早的事情吗？

感谢。

我确定有人会问，所以这是启动滑块的代码。

jQuery('#slides').slides({
    preload: true,
    preloadImage: 'images/loader.gif',
    play: 8000,
    effect: 'fade',
    pause: 15250000,
    slideSpeed: 8000,
    crossfade: true,
    fadeEasing: "easeOutQuad",
    hoverPause: true
});

Answer 1

大多数滑块扫描DOM以查找当前现有元素的onload。如果更改DOM（即使用ajax动态），则可能必须重新初始化滑块。对于每个滑块插件，如何做到这一点会有所不同。

您可以尝试将$（'＃sliderrs'）。slides（...）调用放入函数，在pageload上调用该函数，然后在ajax更改DOM时重新调用该函数。

Answer 2

查看http://api.jquery.com/live了解有关直播功能的更多详情

动态添加的元素不会加载到我的jQuery滑块中

2 个答案: