1

$.mobile.changePageがどのように機能するかを理解しようとしています。メソッド$.mobile.changePageをDOMの最後の要素の後に無名関数に配置しましたが、機能しませんでしたが、document.readyに配置すると、正常に機能します。どうして？アドバイスをいただければ幸いです

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

    <!-- Start of first page -->
    <div data-role="page" id="foo">

        <div data-role="header">
            <h1>Foo</h1>
        </div><!-- /header -->

        <div data-role="content">   
            <p>I'm first in the source order so I'm shown as the page.</p>      
            <p>View internal page called <a href="#bar">bar</a></p> 
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->

    </div><!-- /page -->

    <!-- Start of second page -->
    <div data-role="page" id="bar">

        <div data-role="header">
            <h1>Bar</h1>
        </div><!-- /header -->

        <div data-role="content">   
            <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
            <p><a href="#foo">Back to foo</a></p>   
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->

    </div><!-- /page -->

    <script>
        (function(){ 

                $.mobile.changePage($("#bar"), { transition: "slideup"} );          

        })();// this doesn't work


        $(document).ready(function(){

                $.mobile.changePage($("#bar"), { transition: "slideup"} );

            })//this works

    </script>
4

1 に答える 1

1

document readyでは正しく動作しませんjQuery Mobile。通常、ページが 内に読み込まれる前にトリガーされますDOM。

これについて詳しく知りたい場合は、この記事をご覧ください。透明性を保つために、これは私の個人的なブログです。または、こちらをご覧ください。

それを機能させるには、次のように正しいページ イベントを使用する必要があります。

$(document).on('pagebeforeshow', '#foo', function(){       
    $.mobile.changePage($("#bar"), { transition: "slideup"} );
});

同時に、これは良い解決策ではありません。最初のページの読み込み中はページを変更しないでください。主に誤動作の原因となりjQuery Mobileます。Ether は、最初のページが正常にロードされた後 ( page #foo) に実行するか、ページの順序を変更して page を#bar最初のページにします。

于 2013-03-15T14:21:22.177 に答える