ASP.NET MVC 2 Jquery event not fired

i'm building a view for editing a variable length list using this http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ solution.

Here's my ActionLink:

 <%= Html.ActionLink("Add another...", "AddReceiver", null, new { id = "addItem" })%>

And here's my javascript code:

$("#addItem").click(function 开发者_开发问答() {
$.ajax({
    url: this.href,
    cache: false,
    success: function (html) { $("#editorRows").append(html); }
});
return false;});

The problem is that click event is not fired, so i'm getting not the ajaxly updated view, but an empty page with my partial view, gotten from the AddReceiver action.

Any suggestions, guys?

It sounds like your browser is following the link immediately after executing the click function and thus overriding your script. Try using the preventDefault() method of the event.

$("#addItem").click(function (event) {
  event.preventDefault();
  $.ajax({
    url: this.href,
    cache: false,
    success: function (html) { $("#editorRows").append(html); }
  });
  return false;
});

Is the click handler function defined in the $(document).ready (...) Function?