DOM操作后的jQuery Mobile和.next（）？

好的，我已经开始使用jQuery手机的预取功能。我正在使用此页面上指定的链接方法。唯一的问题是我的刷卡代码无法看到通过预取引入的页面。请参阅这个js提琴，了解该问题的工作示例

任何人都有任何想法，试图得到什么。下一步找到新的页面。我还尝试通过

div.ui-page

---

在firebug中，它仍然是一个空选择器。

问题是您正在尝试选择下一个DOM元素，而不是下一个pesueo页面元素。由于您是在加载DOM之后添加最后一个页面，因此它实际上是在另一个元素之后添加的（因此

.next（）

选择另一个元素而不是伪页面）

我改变了：

$(this).next("div:jqmData(role='page')");
$(this).prev("div:jqmData(role='page')");

致：

它选择所有上一个/下一个伪页面，然后只选择其中的第一个

下面是一个演示：

如果不为滑动事件委派事件处理程序，则滑动事件处理程序将不会为动态放置的伪页面运行。以下是如何解决这个问题：

$(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 });
        }
    });

下面是一个演示：

更新

以下是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，而是

元素的直接子元素

---

请注意，动态创建的伪页面是在JSFIDLE将JS代码添加到

标记中之后添加到DOM的。如果不在JSFIDLE上运行，这将是一个问题，因为jQuery Mobile在初始化时添加了一个loader元素。

谢谢，这确实有效。next只在第一次加载页面时的DOM上工作？正如我所想的，我对这一部分有点困惑。下一步将检查当前的DOM。还有一些关于处理特定于一组页面的代码的提示，比如说class demo？@hcker2000

。next（）

只选择立即进行的同级元素，因此如果您传入选择器，而下一个元素与选择器不匹配，您就不会选择任何内容。这就是为什么有一个

.nextAll（）

方法允许您传递一个仅匹配某些同级的选择器

.nextAll（）

和

.prevAll（）

很好，因为如果您使用

.sides（）

您必须在该列表上进行操作，以检测哪个最接近当前选择。好的，我现在明白了。谢谢你提供的额外信息，我不知道我为什么这么想。下一个做了什么。下一个做了什么。

<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>