0

そこで、jQuery Mobile フレームワークを使用して新しいモバイル Web サイトを構築することにしました。ローカルの href リンクを ajax でロードする機能があり、これは素晴らしいことです。しかし、読み込まれる新しいページは、どの JavaScript にも応答しません。私はホームページとページ 2 を持っています。どちらも同じ html レイアウトを持ち、コンテンツにいくつかの変更があります。例を挙げます。

左からスライドインし、メイン コンテンツを右に押すナビゲーション メニューを作成しました。ページリンクをクリックすると、ajax を介して新しいページが読み込まれますが、新しいページでメニューボタンをクリックしても、jQuery はこれを取得しないため、何も起こりません (メニューがスライドアウトしません)。

$(document).ready(function() {
$( ".menu-trigger" ).click(function() {
    console.log("1")
    if ($( 'nav' ).hasClass('navTransform')) {
        console.log("2")
    $( 'nav' ).removeClass('navTransform');
    $( 'article' ).removeClass('articleTransform'); 
    }
    else {
        console.log("3")
    $( 'nav' ).addClass('navTransform');
    $( 'article' ).addClass('articleTransform');
    }
});
});

この jQuery スクリプトは、両方のページのヘッダーに含まれる別の .js ファイルにあります。ページを更新するとメニュートリガーが機能するため、スクリプトが正常に機能することはわかっています。これに対する既知の回避策はありますか?

4

1 に答える 1

0

pageinit()これを回避するには、jQuery 対応ハンドラーの代わりに適切な jQM ハンドラーを使用します。

pageinit = DOM 準備完了

人々が jQuery で最初に学ぶことの 1 つは、DOM の準備が整うとすぐに $(document).ready() 関数を使用して DOM 固有のコードを実行することです (これは多くの場合、onload イベントのずっと前に発生します)。 ただし、jQuery Mobile サイトとアプリでは、ページが要求され、ユーザーがナビゲートするのと同じ DOM に挿入されるため、DOM 準備完了イベントは最初のページに対してのみ実行されるため、あまり役に立ちません。jQuery Mobile で新しいページが読み込まれて作成されるたびにコードを実行するには、pageinit イベントにバインドします。

したがって、コードは次のようになります。

$(document).on("pageinit", "#page1", function(){
    //Your init code for page 1 goes here  
});

$(document).on("pageinit", "#page2", function(){
    //Your init code for page 2 goes here  
});
于 2013-02-09T01:29:36.530 に答える