jQuery AJAXの両方のアクションを実行するPOSTは、自分自身の代わりに同じコールバックメソッドを実行します

Question

私が実行した面白い問題です。私は、jQueryのUIダイアログ内でデータを参照するためにjQuery AJAX呼び出しを使用するStruts 2 Webアプリケーションを持っています。同じページには、異なるデータを検索する2つの異なるダイアログがあります。各ダイアログにはページングがあるため、次のリンクが表示されます。同じコールバックを呼び出すダイアログまたは複数のダイアログしかない場合は、すべて正常に動作します。複数のダイアログが表示されるとすぐに、それぞれがアクションクラスへのコールバックを呼び出すと、それが破棄されます（つまり、getCustSearchHtml（）メソッドは両方のAJAX呼び出しで呼び出されます）。タスクルックアップ中に[次へ]リンクをクリックすると、適切なアクションメソッドが呼び出されますが、成功コールバックはtaskData.taskSearchHtmlの代わりにreturnData.custSearchHtmlを呼び出します。ここに基本コードがあります：

$('#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に同じIDを持つ複数の要素があります。それは無効で、あらゆる種類の方法でjQueryを混乱させるでしょう。

EDIT：

それでもクラスセレクタ.TLnextLinkを使用しているが、TLnextLinkは、あなたが言うID