JQuery: Live <a> tag partially working second time around.
- by BPotocki
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 XML.
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.
