Question

I’m loading and inserting html-code using Jquery Load() method.
But when I’m trying to locate an html-element that I know was loaded it can’t be found.

//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

Why do I have this problem? I what is the easiest way to fix it?

Answer 1

jQuery.load is a wrapper around the jQuery AJAX functions, and is therefore an asynchronous operation. Try using a callback:

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 !!!
});