動的コンテンツがjqueryモバイルで読み込まれない

Question

jqueryモバイルページには次のコードがあります。私はそれを直接実行すると動作しますが、別のページからリンクするとロードされません。私は参照リンクでデータアヤックスをオフにしようとしましたが、違いはありません。何か案は？

var urlQuery = location.search; 
urlQuery = urlQuery.replace('?', ''); 
var split = urlQuery.split('='); 
var id = split[1]; 

$(document).delegate('[data-role="page"]', 'pageinit', function(){ 
    $.get('../ws/bars.php?id=' + id, function(data) { 
     $('[data-role="content"]').html(data); 
     $('[data-href="specials"]').trigger('click'); 
    }); 
}); 


$(document).delegate('[data-role="navbar"] a', 'click', function(event){ 
    $('.content_div').hide(); // hide all the .content_div's 
    $('#' + $(this).attr('data-href')).show(); // display the div that's been clicked $('a.pageTab').removeAttr('style'); // remove styling from the buttons 
    $(this).attr('style','color: #eee;'); // add styling to the active button 
}); 

私はこのことから得るものは何でも答え、私に与えてください理由だけでなく、私はここで何が起こっているのかを理解することができるように：

は、ここでは、コードです。

ありがとうございます！

Answer 1

最初の$.get()関数呼び出しがグローバルスコープで実行されているようです。これは、jQuery Mobileが外部ページをAJAX経由で同じDOMにプルするため、ページがロードされたときに実行され、後続ページがロードされないときに実行されることを意味します。あなたは以下のID、#sun/#monの/ etcと各ページの要素を持っている場合にも

$(document).delegate('[data-role="page"]', 'pageinit', function() { 
    //run AJAX request 
}); 

：だから各擬似ページのためのあなたのAJAXリクエストを実行するために、私はpageinitイベントに結合するであろう。それらをクラスに変更するか、または何らかの方法でそれらをユニークにして、同じIDで同時にDOMに複数の要素を持たないようにする必要があります。あなたは簡単に$.mobile.activePage参照を使用して、現在のページの要素を選択することができます。

$.mobile.activePage.find('.sun')...