jQuery problem on hyperlink click

In two different views I have the following two pieces of code.

FIRST

<table class="table-list">
   <tr class="gridrow">
      <td>David Gilmour</td>
      <td style="width:16px">
         <a href="#" rel="/xyz/Contact/Edit/26965" class="editContactLink" title="Modifica">
            <img alt="" src="/xyz/_assets/images/edit.png">
         </a>
      </td>
   </tr>
   <tr class="gridrow">
      <td>Paco De Lucia</td>
      <td style="width:16px">
         <a href="#" rel="/xyz/Contact/Edit/26966" class="editContactLink" title="Modifica">
            <img alt="" src="/xyz/_assets/images/edit.png">
         </a>
      </td>
   </tr>
</table>

开发者_开发百科SECOND

<div>
    <a href="#" rel="/xyz/Contact/Edit/26965" class="editContactLink" title="Modifica">David Gilmour</a>
</div>
<div>
    <a href="#" rel="/xyz/Contact/Edit/26966" class="editContactLink" title="Modifica">Paco De Lucia</a>
</div>

In both cases I use the following jQuery snippet

$("a.editContactLink").click(function (event) {
    event.preventDefault();
    //use $(this).attr("rel") to go to the edit page of the related contact element
});

In the first case I have only one ajax call to the server while in the second I have two ajax calls both going to the same address

Where am I wrong?

Make sure that your code here:

$("a.editContactLink").click(function (event) {
    event.preventDefault();
    //...
});

isn't running twice, whether by being inside another event, or included twice to begin with, etc. For example if it's loaded by AJAX, change $("a.editContactLink") to $("a.editContactLink", data) (data being the response), or use a .live() or .delegate() handler, for example:

$("#container").delegate("a.editContactLink", "click", function(event) {
    event.preventDefault();
    //...
});

This is totally a hack/band-aid, but it will get you working. I am indubitably sure that you are binding twice, as Nick assumed.

$("a.editContactLink").unbind('click').click(function (event) {
    event.preventDefault();
    //use $(this).attr("rel") to go to t...
});

This answer is here only to report the error scenario...

I had a controller that return a list of addresses

[HttpGet]
public virtual ActionResult GetAddressBookEntries( int? page ) {
    IEnumerable<AddressBook> list = _manager.GetList();
    return PartialView( "AddressBookList", list );
}

In the AddressBookList partial view I simply had code like this

<% foreach (var item in Model) { %>
    <% Html.RenderPartial( "AddressBook", item ); %>
<% } %>

And finally in the AddressBook partial view I had

<div class="ui-widget-header ui-corner-top" style="height:20px; padding:4px 6px;">
    <a href="#" rel='<%: Url.Content( "~/Contact/Edit/" ) + Model.ContactID %>' class="editContactLink" title="Modifica">
        <%: Model.FullName %>
    </a>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("a.editContactLink").click(function (event) {
            event.preventDefault();
            //use $(this).attr("rel") to go to t...
        });
    });
</script>

That was the reason for the multiple binding. I moved the <script ... section to the AddressBookList partial and everything works...

I am tired for today I think.....