jQuery Mobile 中的动态内容？答案

【问题标题】：Dynamic content in jQuery Mobile?jQuery Mobile 中的动态内容？
【发布时间】：2011-03-14 12:33:04
【问题描述】：

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

【问题讨论】：

标签： ajax jquery jquery-mobile

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您的document.ready 位于子页面上，当使用 AJAX 加载链接时，仅获取页面 div 并将其放入您的 DOM 中，因此您放入 head 中的任何 javascript 都不起作用并且没有 document.ready ，因为 AJAX 从不触发它。

【讨论】：

【解决方案3】：

如果这些图像是动态创建的，您需要在创建后执行$('#slideshow').rotator(50, 'img');，很可能在 $.ajax 的回调函数中。

【讨论】：