JQuery: Live <a> tag partially works for the second time

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, the one contained in the div is a nested unordered list with multiple Add_ # links. When a link is clicked, an ajax call is used to recreate the list using the new node. It clears all add links, but they are added again by ajax call. That's why I used the .live method, so the new "Add_ #" links still have a binding.

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

The problem I am having occurs when I click "Add_1", then the page refreshes (and creates a new link "Add_1"), then again clicks "Add_1" again. This is the same link, but it was updated during an ajax call. When I do this, the javascript function is still called, but the .load method does not work. Any ideas why this might happen? Thanks.

Answer 1

It looks like the result is cached in order to resolve this, forcing jQuery to make the query so that it does not cache. Add this before all method calls to do this:

 $.ajaxSetup({ cache: false }); 

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