0

私はjqueryとjquery mobileが初めてです。現在、ページが読み込まれると警告メッセージを表示する単純なモバイル アプリケーションを作成しようとしています。提案されているように、html ファイルの head セクションに次のコードを追加しました。

<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $('#chart').live('pageinit', function() {
        alert('jQuery Mobile: pageinit for Config page');
    });
</script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>

本文セクションに、予想どおり、グラフ ページのコードを追加しました。

<div data-role="page" data-theme="b" id="chart">
    <div data-role="header" data-position="fixed">
        <a href="#main-page" data-icon="arrow-r" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
        <h1>Year Chart</h1>
    </div>

    <div data-role="content">
        <div id="container"></div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">

        </div>
    </div>
</div>

ただし、チャート ページが (電話ではなく) 私のコンピューターのブラウザーに読み込まれると、アラート メッセージは表示されません。問題がどこにあるのか誰にもわかりませんか？前もって感謝します！

4

2 に答える 2

1

これは、すべてのブラウザー (IE、chrome、firefox) でアラートを成功させることができる完全な HTML とコードです。あなたのJavaScriptのいくつかは存在しないかタイプミスしていると思います。CDN を使用してみてください。

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script type="text/javascript">
            $( '#chart' ).live( 'pageinit',function(event){
              alert( 'This page was just enhanced by jQuery Mobile!' );
            });
        </script>
    </head>
    <body>
        <div data-role="page" data-theme="b" id="chart">
            <div data-role="header" data-position="fixed">
                <a href="#main-page" data-icon="arrow-r" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
                <h1>Year Chart</h1>
            </div>
            <div data-role="content">
                <div id="container"></div>
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                </div>
            </div>
        </div>
    </body>
</html>

更新しました：

jquery 1.9 以降を使用している場合は、.live の代わりに .on を使用する必要があります。.live が 1.9 から削除されたためです。http://api.jquery.com/live/ したがって、1.9 を使用している場合、コードは次のように変更されます。

$( document ).on( 'pageinit','#chart', function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});
于 2013-02-26T14:46:54.723 に答える
0

jQuery Mobile のページ イベント (pageInit など) は、ページの外ではバブルしないと思います。このようにページdiv内にスクリプトタグを挿入してみてください

<div data-role="page" data-theme="b" id="chart">
    <div data-role="header" data-position="fixed">
        <a href="#main-page" data-icon="arrow-r" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
        <h1>Year Chart</h1>
    </div>

    <div data-role="content">
        <div id="container"></div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">

        </div>
    </div>
    <script type="text/javascript">
        $('#chart').live('pageinit', function() {
            alert('jQuery Mobile: pageinit for Config page');
        });
    </script>
</div>

または、次のように pageInit 関数をドキュメント要素にバインドできます。

$(document).live('pageinit', function() {
        alert('jQuery Mobile: pageinit for Config page');
    });

しかし、最初の解決策はベストプラクティスに沿ったものだと思います

于 2013-02-26T14:37:38.053 に答える