jQuery Mobile 中的动态内容?
您好 - 我正在测试 jQuery Mobile,有一个问题。我编写了一个简单的 jQuery 插件,可以根据一些参数对一些图像进行动画处理。非常基本的东西。现在,这适用于我外部链接到的任何页面(rel =“external”)。但是,如果我使用内置的 Ajax 驱动的页面导航,则后续页面上不会加载任何图像。有没有办法在 jQuery Mobile 中处理动态创建的内容?
脚本:
$(document).ready(function(){
$('#slideshow').rotator(50, 'img');
});
标记:
...
<div data-role="page">
<div id="slideshow">
<img src="images/1.png">
<img src="images/2.png">
<img src="images/3.png">
</div>
</div>
...
Hey there- I'm testing jQuery Mobile and have a question. I wrote a simple jQuery plug-in that animates a few images based on some parameters. Very basic stuff. Now this works on any page I link to externally (rel="external"). However, if I use the built in Ajax-driven page navigation, none of the images load on subsequent pages. Is there a way to work with dynamically created content within jQuery Mobile?
Script:
$(document).ready(function(){
$('#slideshow').rotator(50, 'img');
});
Markup:
...
<div data-role="page">
<div id="slideshow">
<img src="images/1.png">
<img src="images/2.png">
<img src="images/3.png">
</div>
</div>
...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以绑定到 pagebeforecreate 事件,该事件将在页面内容最初创建时触发,并从那里启动旋转器:
You can bind to the pagebeforecreate event, which will fire when the page content is initially created and start your rotator from there:
您的
document.ready
位于子页面上,当使用 AJAX 加载链接时,仅获取页面 div 并将其放入您的 DOM 中,因此您在 head 中放置的任何 javascript 都不起作用,并且有没有 document.ready,因为 AJAX 永远不会触发它。Your
document.ready
is on a subpage and when the link is loaded with AJAX, only the page div is taken and put in your DOM, so any javascript you put there in head does not work AND there is no document.ready, because AJAX never triggers it.如果这些图像是动态创建的,您需要在创建后执行
$('#slideshow').rotator(50, 'img');
,最有可能在 $.ajax 的回调函数中。If those images are created dynamically you'll need to do
$('#slideshow').rotator(50, 'img');
after they are created, in callback function of $.ajax most likely.