Question

我正在使用this answer中提供的代码在我的Phonegap应用程序中滑动多个页面。

但是，似乎不推荐使用live函数，而且当我尝试重新加载时，页面下方会出现“0”。当我尝试更多时，会创建一串零，每个零的数量表示该页面的重新加载次数。长话短说：刷卡工作但刷卡页面的每次加载都会出现0。

我试图改变这个但似乎没有用（我正在使用Phonegap 2.1.0，jQuery 1.8.2和jQuery Mobile 1.1.1）。

<script type="text/javascript">
    $('div.ui-page').on("swipeleft", function () {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
    $('div.ui-page').on("swiperight", function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: true
            }, true, true);
        }
    });
</script>

编辑：我试过这个并且与最初的问题一样：

<script type="text/javascript">
    $(document).delegate('div.ui-page', 'swipeleft', function () {
        var nextpage = $(this).nexy('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
    $(document).delegate('div.ui-page', 'swiperight', function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
</script>

Answer 1

该版本的on等同于bind。要替换你需要的直播

$(document).on("swipeleft", "div.ui-page", function...

要进一步调试事件，请检查$（this）引用的内容 - 它可能不是您认为的页面，并且可能没有next / previous元素。

这取决于你的应用程序的设置方式，但一般来说，你不能依赖任何特定顺序中存在的页面div。

此外，对changePage的调用似乎与当前文档不匹配（ http://jquerymobile.com/test/docs/api/methods.html） - 最后两个结果是什么？

Answer 2

我不知道回答我自己的问题是否具有良好的礼仪，但我找到了解决方案，我觉得它很方便可见。

我更新到jQuery 1.8.2和jQuery mobile 1.2.0，一切正常。一个有效的例子是：

<!DOCTYPE HTML>
<html>
<head>
    <title>EventApp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/css/jquery.mobile.structure-1.2.0.min.css" />

    <script type="text/javascript" charset="utf-8" src="js/core/cordova-2.1.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    $('div.ui-page').live("swipeleft", function () {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            });
        }
    });
    $('div.ui-page').live("swiperight", function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: true
            });
        }
    });
    });
    </script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page one</h2>
    </div>
    <div data-role="content">
        You are in page one.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page two</h2>
    </div>
    <div data-role="content">
        You are in page two.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page three</h2>
    </div>
    <div data-role="content">
        You are in page three.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">The map</h2>
    </div>
    <div data-role="content">
        <div id="map_canvas"></div>
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
</body>

如果你想要the JsFiddle is here

在jQuery和Phonegap中滑动意外地工作

2 个答案: