jquery.load（）を使用してロードされた要素が存在しません

Question

Jquery Load（）メソッドを使用してHTMLコードをロードして挿入しています。 しかし、私が知っているhtml要素を見つけようとしているとき、ロードされていません。

//React to mouse clicks on table rows (that has company ID specified) 
$("tr[id^=c_],tr[id^=e_]").live("click",function(event) { 
     //Fetch data from the server 
     var data = $('<td colspan="8" />').load('myUrRL?uid='+ID); 
     //Insert html-code into page 
     var tmp = $('<tr />').append(data).insertAfter($(this)); 

     //Find one element we just inserted 
     var chartDiv = $("#chart_div_"+ID); // <-- FAILS !!! 
}); 
//Now the element exists 
var chartDiv = $("#chart_div_"+ID); // <-- SUCCESS 

なぜこの問題がありますか？私はそれを修正する最も簡単な方法は何ですか？

Answer 1

jQuery.load jQueryのAJAX機能のラッパーであるため、非同期動作です。コールバックを使用してみてください：

var self = this; 
var data = $('<td colspan="8" />').load('myUrRL?uid='+ID, function(){ 
    //Insert html-code into page 
    var tmp = $('<tr />').append(data).insertAfter($(self)); 

    //Find one element we just inserted 
    var chartDiv = $("#chart_div_"+ID); // <-- SUCCESS !!! 
}); 

Answer 2

コンテンツの読み込みが完了するまで待つ必要があります。

//React to mouse clicks on table rows (that has company ID specified) 
$("tr[id^=c_],tr[id^=e_]").live("click",function(event) { 
     //Fetch data from the server 
     var data = $('<td colspan="8" />').load('myUrRL?uid='+ID,function(){ 
       var chartDiv = $("#chart_div_"+ID); // <-- SUCCESS !!! 
     }); 
     //Insert html-code into page 
     var tmp = $('<tr />').append(data).insertAfter($(this)); 

     //Find one element we just inserted 
     var chartDiv = $("#chart_div_"+ID); // <-- FAILS !!! 
}); 
//Now the element exists 
var chartDiv = $("#chart_div_"+ID); // <-- SUCCESS