好的，我已经开始使用 jQuery Mobiles 预取功能了。我正在使用此页面上指定的链接方法http://jquerymobile.com/test/docs/pages/page-cache.html。唯一的问题是我的刷卡代码无法看到通过预取引入的页面。请参阅此 js fiddle 以获取该问题的工作示例。
任何人都对尝试获取 .next 以查找新页面有任何想法。我也尝试通过
来定位他们div.ui-page
在 firebug 中它仍然是一个空的选择器。
【问题讨论】：
标签： jquery dom jquery-mobile touch
问题是您试图选择下一个 DOM 元素，而不是下一个 pesueo-page 元素。由于您是在 DOM 加载后添加最后一页，因此它实际上是在另一个元素之后添加的（因此 .next() 正在选择另一个元素而不是伪页面）。
我变了：
$(this).next("div:jqmData(role='page')");
$(this).prev("div:jqmData(role='page')");
收件人：
$(this).nextAll("div:jqmData(role='page')").first();
$(this).prevAll("div:jqmData(role='page')").first();
选择所有前一个/下一个伪页面，然后只选择其中的第一个。
这是一个演示：http://jsfiddle.net/UurQC/2/
如果您不为滑动事件委托事件处理程序，则滑动事件处理程序将不会为动态放置的伪页面运行。解决方法如下：
$(document)
.on("swipeleft", "div:jqmData(role='page')", function(){
var $nextPage = $(this).nextAll("div:jqmData(role='page')").first();
// swipe using id of next page if exists
if ($nextPage.length > 0) {
$.mobile.changePage($nextPage, { transition: 'slide' });
}
})
.on("swiperight", "div:jqmData(role='page')", function(){
var $prevPage = $(this).prevAll("div:jqmData(role='page')").first();
// swipe using id of next page if exists
if ($prevPage .length > 0) {
$.mobile.changePage($prevPage, { transition: 'slide', reverse : true });
}
});
这是一个演示：http://jsfiddle.net/UurQC/3/
更新
这是 DOM 的外观以及为什么需要上述内容：
<div data-role="page" id="text_0" data-url="text_0" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 452px; "></div>
<div data-role="page" id="text_1" data-url="text_1"></div>
<div data-role="page" id="text_2" data-url="text_2"></div>
<script type="text/javascript">...</script>
<div data-role="page" id="text_3" data-url="text_3"></div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"></div>
请注意，这不是完整的 HTML，而只是 <body> 元素的直接子元素。
请注意，在 JSFiddle 在 <script> 标记中添加您的 JS 代码后，动态创建的伪页面将添加到 DOM。当不在 JSFiddle 上运行时，这也是一个问题，因为 jQuery Mobile 在初始化时添加了一个加载器元素。
【讨论】：
.next() 只选择紧邻的同级元素，所以如果你传入一个选择器并且紧邻的下一个元素与选择器不匹配，你就不会选择任何东西。这就是为什么有一个.nextAll() 方法允许你传递一个只匹配某些兄弟的选择器。 .nextAll() 和 .prevAll() 很好，因为如果您使用 .siblings()，您必须在该列表上进行工作以检测哪个最接近当前选择。