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是所点击的<tr>元素的父<td>元素：

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

但点击后<tr>：

后我无法插入回复

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

我做错了什么？

Answer 1

您需要在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 2

logreader-header-row是一个类，意味着要选择它，您需要在其前面添加.字符（Class selector）。

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

否则，此处的代码正在搜索<logreader-header-row>元素。

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);
            }
        });
    });
});

如何使用Jquery在特定行之后插入多个表行？

3 个答案: