Question

我正在尝试在同一解决方案中导航内部jqueryMobile页面（data-page =“mypage”）和普通页面（xxxx.php）。我希望它的行为如下：

从＃lista-x执行向右滑动并转到#listas
执行新的向右滑动并转到index.php

问题在于，如果我在＃lista-x上执行滑动，它会直接转到index.php。我几乎没有看到它正在执行这两个动作，也就是说，首先它转到#listas然后转到index.php。这是我的代码（它是简化的，以便让您更容易理解）：

 <!-- EXAMPLE.PHP -->
    <div data-role="page" id="listas">
            <a data-role="button" href="#lista-1">lista 1</a>
            <a data-role="button" href="#lista-2">lista 2</a>
            <a data-role="button" href="#lista-3">lista 3</a>
        </div>
        <div data-role="page" id="lista-1">
            //something...
        </div>
        <div data-role="page" id="lista-2">
            //something...
        </div>
        <div data-role="page" id="lista-3">
            //something...
        </div>


<script type="text/javascript">    
$("[id='listas']").bind('pageshow', function(){
    // Gestos táctiles
            $(function() {
                $("body").bind('swiperight', function(event) {
                        window.location = "mov-eventos.php";
                        // $.mobile.changePage( "mov-eventos.php");
                });

            });
    });


    $("[id^='lista-']").bind('pageshow', function(){
    // Gestos táctiles
        $(function() {
            $("body").bind('swiperight', function(event) {
                    $.mobile.changePage("#listas", "slide", false, true);
            });
        });
    });
</script>

如何按照我之前的说明解决问题？：

提前致谢

Answer 1

问题在于，虽然您只选择了一些元素（例如$("[id^='lista-']")），但您将swiperight事件绑定到body元素，因此swiperight被触发两次。你必须将它绑定到选定的元素。

jQuery Mobile - 如何组合内部页面和普通页面滑动？

1 个答案: