Question

嘿那里 - 我正在测试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>
...

Answer 1

您可以绑定到pagebeforecreate事件，该事件将在最初创建页面内容时触发，并从那里启动您的旋转器：

$(document).ready(function(){
  $("#pageID").live('pagebeforecreate',function(event){
    $('#slideshow').rotator(50,'img');
  });
});

Answer 2

您的document.ready位于子页面上，当链接加载了AJAX时，只会占用页面div并将其放入您的DOM中，因此您放在那里的任何javascript都不起作用且没有文档.ready，因为AJAX永远不会触发它。

Answer 3

如果这些图像是动态创建的，那么创建它们之后需要$('#slideshow').rotator(50, 'img');，最有可能是$ .ajax的回调函数。

jQuery Mobile中的动态内容？

3 个答案: