jquery mobile - jQueryMobile -如何结合内部页面和普通页面滑动

Question

我试图在同一解决方案中导航内部jqueryMobile页面(data-page="mypage")和正常页面(xxxx.php)。我希望它的行为如下:

• 从#list -x向右滑动，然后转到#listas
• 从#listas执行一个新的向右滑动，并进入index.php

问题是，如果我在#list -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>

我如何才能解决它，以便像我之前解释的那样行事?:

Thanks in advance

Answer 1

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