JQuery Async postback issue, how do I fix this?

Question

I have the following JQuery code which does similar functionality like Stackoverflow where the user clicks on the comment link and it displays the comments or in this case replies to a member's status update, generally it works great except when a member posts a new status update which updates the list of status updates using an ajax async postback in ASP.net MVC.

What happens is if you click on the new item in the list it brings them to a new page instead of doing what the JQuery is suppose to do.

<script type="text/javascript">

    $(function() {
        $("a[id ^='commentLink-']").click(function() {
            match = this.id.match(/commentLink-(\d+)/);
            container = $("div#commentContainer-" + match[1])
            container.toggle();

            if (container.is(":visible")) {
                container.load($(this).attr("href"));
            } else {
                container.html("Loading...");
            }
            return false; //Prevent default action
        });
    });
</script>

Note: I think what is causing it is the fact that the new item in the list isn't actually on the page as the list was updated through the ajax so the new html isn't there until the page is refreshed.

Update Okay how would I use this live/event functionality that Paolo Bergantino spoke of in his answer to trigger an ASP.net MVC ActionResult?

Answer 1

Check out the new Events/live feature in jQuery 1.3

Binds a handler to an event (like click) for all current - and future - matched element.

So as you add new items, jQuery should add the click event to them with this.

If for some odd reason you do not want to upgrade to jQuery 1.3, you can check out the livequery plugin.

EDIT in response to update:

The actual code to use .live would be something like this:

$(function() {
    $("a[id ^='commentLink-']").live('click', function(event) {
        match = this.id.match(/commentLink-(\d+)/);
        container = $("div#commentContainer-" + match[1])
        container.toggle();

        if (container.is(":visible")) {
            container.load($(this).attr("href"));
        } else {
            container.html("Loading...");
        }
        event.preventDefault();
    });
});

The changes that were made are mostly in the 2nd line, where

$("a[id ^='commentLink-']").click(function() {

was replaced by

$("a[id ^='commentLink-']").live('click', function(event) {

I am now also receiving the argument event to use for event.preventDefault(); which is the way you are recommended to stop events by jQuery. If return false; does the trick, though, you can keep that.

I haven't used .live yet, but I think that should do the trick. Make sure that you get jQuery 1.3 in your server before trying this, though. :)