Question

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?

Answer 1

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();
    //...
});