0

私の質問は、jQueryがAJAXによってロードされるまで存在しないさまざまなDOMノードをどのように見つけるかについてです。

私の特定の問題は、jQueryUI tabs（）スクリプトが、AJAXによってロードされたページフラグメントのtabsdivと一緒に含まれている場合にのみ機能することです。tabs divが存在する前（つまり、ajaxがロードされる前）に元のメインテンプレートページの一部としてロードされた場合、このスクリプトは機能しません。

私が何を意味するかを説明するために、ここにいくつかの簡単なコードの説明があります：

 $('a.ajax').live('click', function(){
   $.ajax({ url: '/get_page_with_tabs', 
         success: function(data){ 
         $('div#ajax').append(data); // the content that gets replaced
         } 
   });
});

 $('div#tabs').tabs(); 
 // this script must be part of the "data" along with the <div id="tabs></div>
 // it can't be loaded along with the main template page which contains: <div id="ajax">    </div> and the $.ajax script

補足として、私は実際にPJAXを使用していますが、これは非同期divの読み込みに関してjQueryAJAXと機能的に同じように見えます。

4

2 に答える 2

1

how jQuery finds various DOM nodes that don't exist until they are loaded by AJAX

見つかりません。

タブ初期化コードをAJAX応答ハンドラーに移動します。

$('a.ajax').live('click', function(){
   $.ajax({ url: '/get_page_with_tabs', 
         success: function(data){ 
         $('div#ajax').append(data); // the content that gets replaced
         $('div#tabs').tabs(); 
         } 
   });
});

を使用するliveとon、ページにまだ存在しない要素にイベントハンドラーをアタッチできます（後でajax呼び出しまたはappend一種の関数によって追加される可能性があります）。

jQueryは、イベント「バブリング」のためにこれらのイベントをキャッチできます。基本的に、上位/上位の親が子イベントをキャッチします。

于 2012-03-03T04:37:21.253 に答える
1

ajaxでタブをロードする場合は、ajaxが完了したらタブを初期化する必要があります。イベントを使用して初期化しようとするとready、ページの読み込み時にタブhtmlが存在しません。

すべてのタブhtmlを置き換えると、同じ話になります

于 2012-03-03T04:38:26.053 に答える