Reload jQuery when returning partial view from a controller?

Question

I am making the following call in my web page:

<div id="comments">
    <fieldset>
            <h4>
                Post your comment</h4>
            <% using (this.Ajax.BeginForm("CreateStoryComment", "Story", new { id = story.StoryId }, new AjaxOptions { UpdateTargetId = "comments", OnSuccess = "OnStoryCommentAdded" }))
               { %>
            <%= this.Html.TextArea("Body", string.Empty)%>
            <input type="submit" value="Add Comment" />
            <% } %>
    </fieldset>
</div>

There's other code, but that's the gist of it. The controller returns a partial view that "refreshes" everying in the comments div.

My problem is that the following jQuery is not being applied:

$(".comment .delete").click(function () {
    if (confirm("Are you sure you want to delete this record?") == true) {
        $.post(this.href);
        $(this).parents(".comment").fadeOut("normal");
    }
    return false;
});

I'm assuming it's not being attached because the jQuery loads after the inital page load. If my assumption is correct, how do I get this jQuery to "refresh".

Hopefully that makes some sense! :)

Answer 1

Use the .live keyword to associate code to an element when it's created within the document.