JQuery: Live <a> tag partially working second time around.

Question

I have the following jquery code:

$("a[id*='Add_']").live('click', function() {
    //Get parentID to add to.
    var parentID = $(this).attr('id').substring(4);

    //Get div.
    var div = $("#CreateList");

    //Ajax call to refresh "CreateList" div with new unordered list.
    div.load("/AddUnit?ParentID=" + parentID);
});

Basically, contained within the div is a nested unordered list with several "Add_#" links. Clicking the links uses an ajax call to recreate the list with a new node. It clears all the add links, but they are added again by the ajax call. This is why I used the .live method so newly added "Add_#" links still have the binding.

This works in most cases. If I click "Add_1", the div refreshes with the new info. If I then click "Add_2", it works again as expected.

The problem I'm having happens when I click "Add_1", then the page refreshes (and creates a new "Add_1" link), then I click the re-rendered "Add_1" again. It's the same link, but it was refreshed during the ajax call. When I do that, the javascript function still gets called, but the .load method doesn't work. Any ideas why this might be happening? Thanks.

Answer 1

It looks like the result's being cached, to resolve that, force jQuery to make the request in a way that doesn't cache. Add this before all your method calls to do just that:

$.ajaxSetup({ cache: false });

You can see $.ajaxSetup() and $.ajax() for details.