1

これは、detail.htmlを開こうとする最初のページです。

<a href="detail.html" data-role="none" role="link">
    <div class="place">name</div>
    <div class="arrow"></div>
    <div class="ammount">-&euro;4,<span class="fontsize14">25</span></div>
</a>

detail.htmlにスクリプトをロードするのに問題があります（最初のページでhrefリンクをクリックした後）

これがdetails.htmlのヘッダーにある私のスクリプトです（最初のページでhrefをクリックした後に移動するページ）。問題は、コンソールのテスト印刷を取得できないことです。details.htmlページが読み込まれるとその関数は呼び出されません。手動でページを更新した後にのみヒットします

<script>
    $(document).bind("pageinit", function(){//or $(document).ready(function ()   
          console.log('test');
    });
</script>
4

2 に答える 2

2

問題を理解するには、まずjQueryMobileが外部ページを「ロード」する方法を理解する必要があると思います。デフォルトでは、別のHTMLページへのリンクをクリックすると、JQMはそのページの最初のdata-role = "page"をロードし、それを最初のページのDOMにアタッチします。これは、JQMがそのページdivのみをロードし、スクリプトはロードしないということです。そのコンテナの外にあるなど。

2番目のページのコードを実行する場合は、最初のページにそのスクリプトを含めてイベント委任を使用するか（2番目のページはまだDOMの一部ではないため）、2番目のページの日付ロールにスクリプトを含める必要があります="ページ"ラッパー。

詳細ページのコードを実行する場合は、たとえば、detail.htmlページに次のようなdivがあると仮定して、最初のページにスクリプトを含める必要があります。

<div id="details" data-role="page"> ..rest of your content 
</div>

次に、最初のページで次のことを行うことができます

$(document).on('pageinit', '#details', function() {
  console.log('test');
});

または、「詳細」ページラッパーにスクリプトタグを含めることもできます。

編集：
前述したように、これはデフォルトの動作ですが、必要に応じて、たとえばリンクに追加またはリンクを追加することで、2番目のページをロードするときにjQueryMobileに完全な投稿を行うように指示できますdata-ajax="false"rel="external"

<a href="detail.html" data-ajax="false" data-role="none" role="link">
    <div class="place">name</div>
    <div class="arrow"></div>
    <div class="ammount">-&euro;4,<span class="fontsize14">25</span></div>
</a>

data-rel="external"との違いdata-ajax="false"は、2番目のページが基本的にセマンティックであるdata-rel="external"場合、2番目のページが別のドメインにある場合に使用する必要があることです。

于 2013-01-17T15:20:10.240 に答える
1

私はあなたに実用的な例を作りました：http：//jsfiddle.net/Gajotres/Eqzd2/ 

$("#second").live('pagebeforeshow', function () {
    console.log('This will only execute on second page!');
});

最新バージョンのjQueryを使用している場合は、ライブの代わりにonを使用できます。

また、jQMページ遷移のイベントフローに関する私の記事もご覧ください：https ：//stackoverflow.com/a/14010308/1848600

于 2013-01-17T14:56:52.610 に答える