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

【问题标题】：Dynamically added elements don't load in my jQuery slider动态添加的元素不会加载到我的 jQuery 滑块中
【发布时间】：2011-07-29 04:41:09
【问题描述】：

我的页面目前使用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
});

【问题讨论】：

您可能需要使用 .live() 函数重新加载 DOM 它不会看到页面第一次出现时不存在的元素 ready() 所以你需要告诉它是寻找它们.
修复它所需要做的就是在.ajax 调用中设置选项async:false

标签： jquery slider jslider document-ready

【解决方案1】：

大多数滑块仅在加载时扫描 DOM 以查找当前存在的元素。如果 DOM 被更改（即使用 ajax 动态更改），您可能必须重新初始化滑块。每个滑块插件的执行方式会有所不同。

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

【讨论】：

那么，我会在我的 jQuery.ajax 方法中调用那个“函数”吗？
是的..一旦加载，在你的“$(function(){...});”中，然后在你的jQuery.ajax“成功”回调中。

【解决方案2】：

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

【讨论】：