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

Posted by BPotocki on Stack Overflow See other posts from Stack Overflow or by BPotocki
Published on 2010-04-16T14:20:19Z Indexed on 2010/04/16 14:23 UTC
Read the original article Hit count: 218

Filed under:
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-live