Jquery load and then edit loaded content

Question

Hi,

I am using Jquery load and then as soon as the content is loaded into the div I want to change some of the tags to language dependent variables.

My problem is that I am having to use a settimeout to get the script to wait long enough for the elements to be ready to edit.

When I use the callback function parameter the elements I want to edit apparently aren't ready because they don't get set. I hate to use settimeout because this limits everyone to the slowest setting and invariably some connections will be even slower than that.

Apparently the callback method just means that the ajax method got the html back but it doesn't ensure that the imported elements are actually ready in the dom.

Anyone have ideas?

current code

$("#content-basket").load("/BasketPage.htm?time=" + now.getMilliseconds());
...
...
setTimeout("timedbasket();", 500);
...
...
function timedbasket() {
    alert($('#basketlegend'));
    $('#basketlegend').html(basketlabel);
}

I would like to be able to use

$("#content-basket").load("/BasketPage.htm?time=" + now.getMilliseconds(), "", timedbasket());

Here is the basket.htm source

<tr>
    <td>
        <div id="basket">
            <fieldset>
                <legend><span id="basketlegend"></span></legend>
                <table id="baskettbl" border="0" class="basket-table">
                    <tbody>
                        <tr class='total'>
                            <td>
                                <span id="empty"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </fieldset>
        </div>
    </td>
</tr>

Answer 1

Use the callback parameter for load and put your code in the callback.

$("#content-basket").load("/BasketPage.htm?time=" + now.getMilliseconds(),null,
    function() {
           ...do stuff here after #content-basket is finished loading...
});

After looking at jQuery, it sure seems like the response is injected before any callbacks are called so the DOM should be updated. Is it possible that you are are re-using jQuery objects that may reference DOM elements that were previously there, but were replaced by the load?

Answer 2

jQuery.live is the answer. Bind your events to the DOM elements this way and even new ones will be affected.