动态添加的元素未加载到我的 jQuery 滑块中
我的页面当前使用 幻灯片
我希望能够动态向我的滑块添加新的“幻灯片”。我执行此操作的方法是通过 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 的幻灯片中。问题是，幻灯片不起作用。
如果我自己对容器内的
这可能是一个“时间”问题吗？滑块尝试运行后元素加载到哪里？如果是这样，我怎样才能在之前添加它们。这一切都发生在 (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
});
My page currently uses Slides
I want to be able to add new "slides" to my slider dynamically. The way I do this is through an XML document, which contains a link to the "slide image" and the href.
My jQuery code to dynamically add elements is this:
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);
});
}
});
This all works, and adds the divs to the slides containing div. The problem is, the slide doesn't work.
If I hard code the <div> elements within the container myself, they load just fine.
Could this be a "timing" issue? Where the elements are loaded after the slider attemps to run? And if so, how can I add them prior to. This all happens in the (document).ready method. Is there something sooner?
Thanks.
I'm sure someone will ask, so here's the code to start the slider.
jQuery('#slides').slides({
preload: true,
preloadImage: 'images/loader.gif',
play: 8000,
effect: 'fade',
pause: 15250000,
slideSpeed: 8000,
crossfade: true,
fadeEasing: "easeOutQuad",
hoverPause: true
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
大多数滑块仅在加载时扫描 DOM 以查找当前存在的元素。如果 DOM 发生更改（即使用 ajax 动态更改），您可能必须重新初始化滑块。对于每个滑块插件，如何执行此操作会有所不同。
您可以尝试将 $('#sliders').slides(...) 调用放入一个函数中，在页面加载时调用该函数，然后在 DOM 通过 ajax 更改时重新调用该函数。
Most sliders scan the DOM for currently existing elements only onload. If the DOM is changed (i.e. dynamically with ajax), you may have to re-initialize the slider. How to do this will be different for each slider plugin.
You could try putting the $('#sliders').slides(...) call into a function, calling that function on pageload, then re-calling that function whenever the DOM is changed by ajax.
查看 http://api.jquery.com/live 了解有关 live 功能的更多详细信息
check out http://api.jquery.com/live for more details on the live function