jquery - 动态添加的元素未加载到我的 jQuery slider 中

Question

我的页面当前使用Slides

我希望能够动态地将新的“幻灯片”添加到我的 slider 中。我执行此操作的方法是通过 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>我自己在容器内的元素，它们加载得很好。

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

谢谢。

我肯定有人会问，所以这里是启动 slider 的代码。

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

大多数 slider 仅在加载时扫描 DOM 以查找当前存在的元素。如果 DOM 发生更改(即使用 ajax 动态更改)，您可能需要重新初始化 slider 。对于每个 slider 插件，如何执行此操作会有所不同。

您可以尝试将 $('#sliders').slides(...) 调用放入一个函数中，在页面加载时调用该函数，然后每当 ajax 更改 DOM 时重新调用该函数。