1

JQuery Mobile で外部 JavaScript スクリプトを使用する際に問題が発生した他のユーザー (この投稿など) を目にしました。今日、私は彼らの仲間入りをしました。

サイトの複数のページに影響するコードを含む単一の外部 js スクリプト (controllers.js) があります。サイトのすべてのページにロードされます。タグの直前にjsファイルを配置すると、最初のページの読み込みで正常に機能します。ただし、その後（JQM Ajaxメソッドを使用して）ナビゲートすると、スクリプト内のすべての機能が機能しなくなります。スクリプトはキャッシュに残ると思っていましたが、ちょっと。いずれにせよ、この質問に答えるFAQがあり、私は彼らの提案を実装しました:「...すべてのページのヘッドで同じスタイルシートとスクリプトのセットを参照すること。」私はこれを行いましたが、最初のページの読み込みでもjsが起動しません。ページ固有のスクリプトはありません。そのため、FAQ の残りの部分は適用されません。

私の切り詰めたhtmlは次のようになります：

<!doctype html>
    <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <link rel="stylesheet"  href="/static/jquery-ui-1.10.3.custom.min.css">
        <link rel="stylesheet"  href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">

        <script src="/static/jquery-1.9.1.min.js"></script>
        <script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>

      <!-- CSS: implied media="all" -->
    </head>


    <body>
        <div data-role="page" id = "main-page">

            <div data-role="header" style="overflow:hidden;">
            </div>

            <div id = "home" data-role="content">
                <input type ='button' id = "some_btn" value="press me">
            </div>

        </div>
        <script type="text/javascript" src="/static/js/controllers.js"></script>
    </body>
</html>

およびjavascriptファイル内

controllers.js

$('#some_btn').click(function()
{
    alert('button pressed');
});

私がここで間違っているかもしれないことについてのアイデアはありますか?

4

1 に答える 1

2

のコンテンツは#pageajax を介して動的に読み込まれるため、スクリプトが呼び出されたときにページ上にある要素でのみ機能するため、クリックは機能しません。

.on()メソッドを使用する必要があります。

$('body').on('click','#some_btn',function()
{
    alert('button pressed');
});
于 2013-08-18T15:17:42.467 に答える