JQuery проблема при нажатии гиперссылки

Question

В двух разных представлениях у меня есть следующие две части кода.

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>

В обоих случаях я использую следующий фрагмент jQuery

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

В первом случае у меня только один ajax-вызов на сервер, а во втором у меня два ajax-вызова, оба из которыхтот же адрес

Где я не прав?

Answer 1

Убедитесь, что ваш код здесь:

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

не выполняется дважды, будь то внутри другого события, или включен дважды для начала и т. Д. Например, если он загружен AJAX, измените$("a.editContactLink") до $("a.editContactLink", data) (data - ответ) или используйте обработчик .live() или .delegate(), например:

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

Answer 2

Это полный взлом, но это заставит вас работать.Я, несомненно, уверен, что вы связываетесь дважды, как предположил Ник.

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

Answer 3

Этот ответ здесь только для того, чтобы сообщить о сценарии ошибки ...

У меня был контроллер, который возвращает список адресов

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

В частичном представлении AddressBookList у меня просто был кодвот так

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

И, наконец, в частичном представлении AddressBook у меня было

<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>

Это было причиной множественного связывания.Я переместил раздел <script ... в часть AddressBookList, и все работает ...

Я устал на сегодня, я думаю .....