JQuery AJAX POST-ы к действию обращаются к одному и тому же методу обратного вызова вместо своего собственного

Question

Интересная проблема, с которой я столкнулся. У меня есть веб-приложение Struts 2, где я использую вызовы jquery AJAX в диалогах пользовательского интерфейса jquery для поиска данных. На одной и той же странице есть несколько разных диалогов для поиска разных данных. Каждое диалоговое окно имеет страницу подкачки, отсюда и «следующие» ссылки, показанные ниже. Если у меня только один диалог или несколько диалогов, вызывающих один и тот же обратный вызов, то все работает нормально. Как только у меня появляется несколько диалогов, каждый из которых вызывает свой собственный обратный вызов для класса действия, он прерывается (то есть метод getCustSearchHtml () вызывается в обоих вызовах AJAX ниже). Когда я нажимаю на ссылку «Далее» во время поиска задачи, вызывается правильный метод действия, но обратный вызов успеха вызывает returnData.custSearchHtml вместо taskData.taskSearchHtml. Вот основной код:

$('#customer-lookup').delegate('#CLnextLink', 'click', function(e) {
    e.preventDefault();
    var workOrderId = $("#workOrderId").val();
    var nextPage = $("#nextPage").val();
    $.ajax({
       type: "POST",
       url: "CustomerLookup",
       data: { id: workOrderId, page: nextPage },
       dataType: "json",
       success: function(returnData) {
          $("#customer-lookup").html(returnData.custSearchHtml);
       }
    });
});

$('#task-lookup').delegate('#TLnextLink', 'click', function(e) {
    var workOrderId = $("#workOrderId").val();
    var nextPage = $("#nextPage").val();
    $.ajax({
       type: "POST",
       url: "TaskLookup",
       data: { id: workOrderId, page: nextPage },
       dataType: "json",
       success: function(taskData) {
          $("#task-lookup").html(taskData.taskSearchHtml);
       }
    });
    return false;
});

......

<div id="customer-lookup" class="ui-dialog" title="Customer Lookup">
    .....
        <a id="CLnextLink" href="#">Next Page</a>
    .....
</div>
<div id="task-lookup" class="ui-dialog" title="Task Lookup">
    .....
        <a id="TLnextLink" href="#">Next Page</a>
    .....
</div>

Кто-нибудь когда-нибудь видел это раньше или знает, что я могу делать не так? Спасибо!

Answer 1

У вас есть несколько элементов с одинаковым идентификатором в вашем HTML. Это неверно, и это может испортить jQuery всеми способами.

EDIT:

вы все еще используете селектор класса .TLnextLink, но TLnextLink - это идентификатор