jQuery：事件沒有被觸發的Ajax加載元素

Question

我有一個簡單的前端在jQuery/HTML5（+後端生成的代碼，不會帶來問題，所以我會省略它）。目前正在使用的jQuery版本是1.8.3，並且不存在版本衝突（即沒有加載其他jQuery版本 - 它在其他系統中多次出現）。

前端調用以下程序：

detailAjaxCall("\/client\/orders\/detailsLoad\/id\/3"); 

$(".upLink").click(function(){ 
    console.log("subiendo"); 
    var id = $(this).closest("tr").data('detail-id'); 
    var url = "\/client\/orders\/detailMoveUp" + "/id/" + id; 
    detailAjaxCall(url); 
    return false; 
}); 

$(".downLink").click(function(){ 
    console.log("bajando"); 
    var id = $(this).closest("tr").data('detail-id'); 
    var url = "\/client\/orders\/detailMoveDown" + "/id/" + id; 
    detailAjaxCall(url); 
    return false; 
}); 

$(".delLink").click(function(){ 
    console.log("borrando"); 
    var id = $(this).closest("tr").data('detail-id'); 
    var url = "\/client\/orders\/detailDelete" + "/id/" + id; 
    detailAjaxCall(url); 
    return false; 
}); 

注意：URL字符串不是畸形。它們是由json導出器生成的（這段代碼是從Google Chrome瀏覽器中的view source選項中提取的）。評估它們中的任何一個都將返回一個沒有反斜槓的字符串。

的detailAjaxCall("/client/orders/detailsLoad/id/<number>")實際工作：它返回預期的JSON代碼，當我打的網址，並呈現此時，相應的表項：對的「<a></a>」一代

function detailAjaxCall(url) 
{ 
    $.get(
     url, 
     {}, 
     function(data, status, xhr) { 
      //todo refrescar(data); 
      var table = $("#detail-list"); 
      table.empty(); 
      if (data.length == 0) { 
       $("<tr></tr>").addClass("empty").append($("<td></td>").addClass("empty").text("No hay detalles para este pedido")).appendTo(table); 
      } else { 
       $.each(data, function(index, element) { 
        $("<tr></tr>") 
         .data('detail-id', element['id']) 
         .append(
          $("<td></td>") 
           .append(
            $("<span></span>").addClass("product-name").text(element['producto_nombre']) 
           ) 
           .append("<br />") 
           .append(
            $("<span></span>").addClass("product-dims").text(
             "Ancho: " + element['ancho'] + 
             ", Largo: " + element['largo'] + 
             ", Calibre: " + element['calibre'] 
            ) 
           ) 
         ) 
         .append($("<td></td>").addClass("quantity").text(element['cantidad'])) 
         .append($("<td></td>").addClass("price").text(element['precio'])) 
         .append(
          $("<td></td>") 
           .append(
            $("<a></a>").addClass("upLink").text("subir").attr("href", "javascript: void 0") 
           ).append(" ") 
           .append(
            $("<a></a>").addClass("downLink").text("bajar").attr("href", "javascript: void 0") 
           ).append(" ") 
           .append(
            $("<a></a>").addClass("delLink").text("eliminar").attr("href", "javascript: void 0") 
           ).append(" ") 
         ) 
         .appendTo(table); 
       }); 
      } 
     }, 
     'json' 
    ).fail(function(){ 
     $("#ajaxDetailErrorDialog").dialog("open"); 
    }); 
} 

講究，因爲我的問題是他們。他們都有類似delLink,upLink和downLink。

我的問題從這裏開始：調用$(".delLink").click(callback)，$(".upLink").click(callback)，$(".downLink").click(callback)似乎不綁定事件到新創建的項目（它們在Ajax調用內部創建althought）。查看click方法的源代碼，傳遞參數，就像致電on。

所以：我做錯了什麼動態綁定事件，所以新創建的元素也會觸發我的事件？

Answer 1

您需要動態委派點擊處理程序，因爲您在創建新元素之前分配了點擊處理程序。

例如，委託給document：

$(document).on('click', '.upLink', function(){ 
    console.log("subiendo"); 
    var id = $(this).closest("tr").data('detail-id'); 
    var url = "\/client\/orders\/detailMoveUp" + "/id/" + id; 
    detailAjaxCall(url); 
    return false; 
}); 

這工作，因爲在document所有點擊都會由該處理程序進行檢查，以查看它們是否匹配.upLink。即使您在分配後創建新元素，點擊仍會通過此事件。