0

私は2つのJQMページを持つ単純なhtmlを持っています:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test table</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script>
        $(function(event, ui) {
            console.log('Whole document (+page 1) ready');
        });

        // Unreachable - doesn't matter which event is "on"
        $('#page_test2').on('pagecreate', function(event, ui) {
            console.log('Page 2 create event fired');
        });
    </script>
</head> 
<body>
    <div data-role="page" id="page_test1">
        <div data-role="content">
            <a href="#page_test2" data-role="button">Open next page</a>
        </div>
    </div>
    <div data-role="page" id="page_test2">
        <div data-role="content">
            <a href="#" data-role="button" data-rel="back">Return to first page</a>
            <div id="place">
            </div>
        </div>
    </div>
</body>
</html>

"on" を使用して page2 イベント ハンドラーに到達していないことがわかりました。どうしたの？ここでは、非常に不明確な答えを持つ多くの長いトピックを見つけました。

4

2 に答える 2

2

イベント リスナーをドキュメントに適用します。

$(document).on('pagecreate', '#page_test2', function() {
    //...
});
于 2013-04-19T17:53:36.350 に答える
1

イベントを登録するとき、#page_test2div は存在しません。$(document).ready()イベントを設定するときにすべての DOM 要素が存在するように、イベント登録を呼び出しでラップする必要があります。

そのようです：

$(document).ready(function() {
 $('#page_test2').on('pagecreate', function(event, ui) {
            console.log('Page 2 create event fired');
        });
});

また、コードを div の宣言の下に移動して、javascript の実行時に DOM に存在するようにすることもできます。

于 2013-04-19T17:50:59.523 に答える