0

好的，所以我已经开始使用 jQuery Mobiles 预取功能。我正在使用此页面http://jquerymobile.com/test/docs/pages/page-cache.html上指定的链接方法。唯一的问题是我的刷卡代码无法看到通过预取引入的页面。请参阅此 js fiddle 以获取该问题的工作示例。

http://jsfiddle.net/UurQC/1/

任何人都对尝试获取 .next 以查找新页面有任何想法。我也尝试过通过

div.ui-page

它仍然在萤火虫中作为空选择器出现。

4

1 回答 1

2

问题是您试图选择下一个 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 将您的 JS 代码添加到标签中之后，动态创建的伪页面被添加到 DOM 中<script>。当不在 JSFiddle 上运行时，这也是一个问题，因为 jQuery Mobile 在初始化时添加了一个加载器元素。

于 2012-08-07T21:17:50.233 回答