jquery.mobile：外部ページをDOMにロードするときにイベントが発生しない

Question

最初に、「外部」という言葉をアンカータグで使用されるキーワードexternalと混同しないでください。これはこれについてのものではありません。

私は複数のページのドキュメントを持っており、すべてが正常に動作します。まれに使用される他のいくつかの.htmlページ（つまりページについて）があるので、私はそれらとdomを混乱させたくないのですが、むしろ必要に応じて読み込みます。

about.htmlページからロードすると、このページには、実行中のデバイスに関する情報と、自分のアプリケーションのバージョン番号と、それ以降のバージョンがあるかどうかが表示されます利用可能（一部の人は自動アップデートをオフにする）。

rel = "external"属性がロードされているときに、about.htmlページが別のアプリケーションで動作していることをさらに記録したいと思いますが、 。

だから、私のindex.html内の私はまっすぐ進むナビゲーションバーとアンカータグとヘッダーをされます：私は、シミュレータでアプリを実行すると

<div data-role="popup" id="homeMenu" data-theme="b">    
     <ul data-role="listview" data-inset="true" > 
        <li><a href="about.html" class="ui-icon-info">About</a></li> 

、about.htmlがにロードされますDOMはアクティブなページになり、その部分は動作していますが、私が把握できる1つのイベントはトリガーされません。

私は、次のすべてを試してみました：

$("body").on("pagecontainerbeforeshow", function(event, ui) { 
    console.log("Going to: " +ui.toPage[0].id); 
}); 

$(document).on('pagecreate', function() { 
    $(':mobile-pagecontainer').on('pagecontainerbeforeshow', function(event, ui) { 
     console.log('pagecontainerbeforeshow triggered'); 
     console.log("Going to: " +ui.toPage[0].id); 
    }); 
}); 

// $("#aboutPage").on("pagecontainerbeforeshow", function(event) { 
$("#aboutPage").on("navigate", function(event) { 
    console.log("aboutPage Ready!"); 
    initMenu(); 
    onAboutReady(); 
    $('#aboutPage').on("swiperight", function() { 
     // I know, I know... one step at a time ;-) 
     window.location.href = 'index.html'; 
    });  
}); 

私がそこになければならないのでに関するページがまだDOMに存在していないとして、私はおよそページにイベントハンドラをアタッチすることができないことを想像実際に解雇されるイベントを添付する別の方法です。

私はここで何が欠けていますか？

Answer 1

答えが想像よりも簡単です。 domにない特定のページのイベントをトラップするのではなく、単にすべてのページのイベントをトラップし、switch文とviolaを追加してください！ここ

$("body").on("pagecontainerbeforeshow", function(event, ui) { 
    console.log("pagecontainerbeforeshow -> Going to: " +ui.toPage[0].id); 
    switch(ui.toPage[0].id) 
    { 
     case "aboutPage": // <div id="aboutPage" data-role="page" 
      break; 
    } 
});