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

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 开发者_JS百科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.

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.