Jquery Ajax Load callback firing before load completed

Question

I'm using some pretty simple JQuery Ajax loading and it works happily everywhere except for one item. The area is loaded after the page has completed loading and then binds all the delete links to an ajaxform submit. This works 100% until the delete button is used. The content reloads correctly but the rebinding seems to happen before it has fully loaded as it doesn't rebind the delete links. Checking the size of the collection of elements shows that it still includes the deleted item (e.g. Shows 5 when there are only 4).

Here is the code:

function AjaxLoadCostActivities(CallBack) {
    ShowAjaxProgressIndicator(id_CostActivitiesListing);
    id_CostActivitiesListing.load(url_LoadCostActivities, CallBack);
}

function PrepareCostActivitiesForm() {
    // Submits the form for the delete image button
    $("a.CostActivityDeleteImage").click(function() {
        if (confirm("Are you sure you want to delete this record?")) {
            $(this).parent().ajaxSubmit({
               target: id_CostActivitiesListing,
               success: AjaxLoadCostActivities(PrepareCostActivitiesForm)
            });
            return false;
        }
        return false;
    });  
}

// This is the call that loads the content on page load
// CostActivitiesStartup is just a function that does some unrelated stuff but also
// calls PrepareCostActivitiesForm to prepare the delete forms.
AjaxLoadCostActivities(CostActivitiesStartup);

Answer 1

In this bit of code, what does ShowAjaxProgressIndicator do?

function AjaxLoadCostActivities(CallBack) {
    ShowAjaxProgressIndicator(id_CostActivitiesListing);
    id_CostActivitiesListing.load(url_LoadCostActivities, CallBack);
}

Does ShowAjaxProgressIndicator execute asynchrnous code that should be doing the .load on a callback instead of immediately after?

Answer 2

The easiest way would probably be to use jQuery's live events. These are automatically rebound when new content is injected into the document. Instead of this line:

$("a.CostActivityDeleteImage").click(function() {

You can use this:

$("a.CostActivityDeleteImage").live('click', function() {