如何在使用Jquery的特定行之後插入多個錶行？

Question

我有一個HTML表，其中每一行都有一個數據元素。事情是這樣的：

<tr class="logreader-header-row"> 
    <td class="logtable-header" colspan="100%" data-date="2015-05-12"> 
     <img class="logreader-header-controller" src="images/logreader-dropdown.png"> 
     2015-05-12 
    </td> 
</tr> 
<tr class="logreader-header-row"> 
    <td class="logtable-header" colspan="100%" data-date="2015-05-11"> 
     <img class="logreader-header-controller" src="images/logreader-dropdown.png"> 
     2015-05-11 
    </td> 
</tr> 
<tr class="logreader-header-row"> 
    <td class="logtable-header" colspan="100%" data-date="2015-05-07"> 
     <img class="logreader-header-controller" src="images/logreader-dropdown.png"> 
     2015-05-07 
    </td> 
</tr> 

每一行都有連接到一個onclick事件。當用戶點擊該行的數據屬性被髮送給服務器與一個AJAX請求：

$().ready(function(){ 
    $(".logtable-header").each(function(){ 
     $(this).on("click", function(){ 
      var header_row = $(this).parent("logreader-header-row"); 
      $.ajax({ 
       type: 'POST', 
       url: URL+'admin/ajax_processor/getLog', 
       data:{date:$(this).data("date")}, 
       success: function(response){ 
        header_row.after(response); 
       }, 
       error: function(request, status, error){ 
        console.log(request); 
        console.log(status); 
        console.log(error); 
       } 
      }); 
     }); 
    }); 
}); 

的AJAX響應包含在服務器上生成的表的行的子集的HTML代碼。我想要的是將這些行插入到被點擊的行之後。以下是我在Ajax響應：

<tr class="logtable-oddrow-notice"> 
    <td>2015-04-27</td> 
    <td>08:55:07</td> 
    <td>NOTICE</td> 
    <td>ERROR 404 Requested url: "http://localhost/PH-SERVER_MIRROR/frontend/index/" not found! (user:unidentified[id:-])</td> 
</tr> 

<tr class="logtable-evenrow-notice"> 
    <td>2015-04-27</td> 
    <td>09:21:08</td> 
    <td>NOTICE</td> 
    <td>'Test'[id:30] user succesfully logged in.</td> 
</tr> 

<tr class="logtable-oddrow-notice"> 
    <td>2015-04-27</td> 
    <td>10:13:37</td> 
    <td>NOTICE</td> 
    <td>New newsletter created: "Teszt 2" by user:Test[id:30]</td> 
</tr> 

header_row是點擊<td>元素的父元素<tr>：

var header_row = $(this).parent("logreader-header-row"); 

但我不能插入響應點擊<tr>後：

success: function(response){ 
    header_row.after(response); 
}, 

我在做什麼錯？

Answer 1

logreader-header-row是一個類，意思是選擇它需要用.字符（Class selector）作爲它的前綴。

var header_row = $(this).parent(".logreader-header-row"); 

否則您在此處的代碼正在搜索<logreader-header-row>元素。

Answer 2

您需要包括對parent()調用類選擇：parent('.logreader-header-row')（注意.）

這就是說，它是更好的做法，在這種情況下使用closest()，因爲它會在第一場比賽停止。另外，您不需要使用each()函數來分配事件。試試這個：

$(".logtable-header").click(function(){ 
    var header_row = $(this).closest(".logreader-header-row"); 
    $.ajax({ 
     type: 'POST', 
     url: URL + 'admin/ajax_processor/getLog', 
     data: { date: $(this).data("date") }, 
     success: function(response) { 
      header_row.after(response); 
     }, 
     error: function(request, status, error){ 
      console.log(request); 
      console.log(status); 
      console.log(error); 
     } 
    }); 
}); 

Answer 3

無需在循環中添加事件監聽器。您可以使用事件委派。改爲使用on。

$(document).ready(function() { 
    $("table").on('click', "tr.logtable-header", function() { 
     var header_row = $(this).parent("logreader-header-row"); 
     $.ajax({ 
      type: 'POST', 
      url: URL + 'admin/ajax_processor/getLog', 
      data: { 
       date: $(this).data("date") 
      }, 
      success: function (response) { 
       $(this).closest('.logreader-header-row').after(response); 
       // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
      }, 
      error: function (request, status, error) { 
       console.log(request); 
       console.log(status); 
       console.log(error); 
      } 
     }); 
    }); 
});