動的に作成jQueryのモバイルページ私のjQuery Mobileアプリケーションで

Question

のためのイベントハンドラをアタッチ、私はいくつかの動的なpages.Hereを作成していますと、ページが正しく作成されており、DOMおよびIに追加されているコード

function createPages() 
{ 
    $header = "<header data-role='header'><h1>Dynamically created pages</h1></header>"; 
    $content = "<div data-role='content' class='content'><p>This is a dynamically generated page</p></div>"; 
    $footer = "<div data-role='footer'><h1>Audimax</h1></footer>"; 

    for($i=1;$i<=5;$i++) 
    { 
     $section= "<section id='"+"#fav"+$i+"' data-role='page' data-url='"+"fav"+$i+"' class='dynamic'>"; 
     $new_page = $($section+$header+$content+$footer+"</section>"); 
     $new_page.appendTo($.mobile.pageContainer); 

    } 
} 

ですそれらにナビゲートすることができます。問題は、私は単純に、ダイナミックなページに任意のイベントハンドラをアタッチすることができないことです。私は動的ページのIDを "ライブ"で使用していますが、役に立たないことはありません。

Answer 1

DOMに新しい疑似ページを追加するときに、イベントハンドラをバインドしないのはなぜですか？

function pageShowFunction() { 
    console.log(this.id + ' has triggered the `pageShow` event!'); 
} 
function createPages() 
{ 
    $header = "..."; 
    $content = "..."; 
    $footer = "..."; 

    for($i=1;$i<=5;$i++) 
    { 
     $section= "<section id='"+"#fav"+$i+"' data-role='page' data-url='"+"fav"+$i+"' class='dynamic'>"; 
     $new_page = $($section+$header+$content+$footer+"</section>").bind('pageshow', pageShowFunction); 
     $new_page.appendTo($.mobile.pageContainer); 

    } 
} 

通常、イベントハンドリングを委任するのではなく要素に直接バインドする方がよいでしょう。

P.S.イベントバインディングコードを投稿していないので、そのコードに特定のコメントを付けることはできません。問題が解決しない場合は、そのコードで質問を更新できます。

Answer 2

http://jquery.com/download/

から1.7.1にjQueryのコアをアップグレードした後

$(selector).live(eventName, function(){}); 

それは、動的要素に対して動作署名

$(document).on(eventName, selector, function(){}); 

に以下に置き換えることができます。