使用无法定位的 JQuery 在 HTML 表中动态插入行 [重复]答案

【问题标题】：Dynamically inserting rows in HTML table with JQuery that cannot be targeted [duplicate]使用无法定位的 JQuery 在 HTML 表中动态插入行 [重复]
【发布时间】：2017-12-22 00:02:55
【问题描述】：

我在使用下面的代码按“Enter”来定位新创建的行时遇到问题。如果我有这种倾向，我想继续按“Enter”来创建新行；但是，按两次 Enter 最多只会产生一个新行（来自原始 HTML 行）。为了调试这种情况，我使用了一个单击事件侦听器来控制台记录与表关联的节点，并发现在本机 HTML 的每一行之间都有文本节点很奇怪。但是，这些文本节点并不是随每个新行动态生成的。 HTML 表格是否需要这些文本节点才能正常运行？

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8;charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $( document ).ready(function() {
            $("tr").on("keydown", "input", function(){
                keyDownLocation = this.selectionStart;
            });

            $("tr").on("keyup", "input", function(e){
                if (e.key === "Enter") {
                    var tempSelect = this.value.substr(this.selectionStart);
                    this.value = this.value.substr(0, this.selectionStart);
                    $(this).parent().parent().after('<tr><td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td><td class="item-td"><input class="input-item" type="text" value="' + tempSelect + '"></td></tr>');
                    $(this).parent().parent().next().find(".input-item").focus();
                }
            });

            $("tr").on("click", "input", function(){
                console.log($(this));
                console.log($(this).parent().parent().parent()[0].childNodes);
            });
        });
    </script>
    <title>Title</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" name="checklist-list" class="checkbox-box"></th>
                <th>Item</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
                <td class="item-td"><input class="input-item" type="text" value="Artificial"></td>
            </tr>
            <tr>
                <td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
                <td class="item-td"><input class="input-item" type="text" value="Broken"></td>
            </tr>
            <tr>
                <td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
                <td class="item-td"><input class="input-item" type="text" value="Casual"></td>
            </tr>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</body>
</html>

【问题讨论】：

问题是，.on() 没有附加到动态创建的行。您需要将其更改为$("#myTable").on("keyup", "tr td input", function(){});
如果我有幸找到那个帖子，我可能不会发现静态祖先元素（在“on”方法之前）与目标动态创建元素（在 on方法）。我认为你是正确的，这个问题与你所引用的问题之间存在相当多的重叠。我仍然很想知道为什么文本子节点（在节点之间）不是动态生成的 JQuery，因为它们是由原始 HTML 自动生成的。谢谢你的帮助，克拉姆！
原因是因为事件处理程序在页面加载时绑定到页面上的每个tr 元素。如果您在页面加载后创建 tr 元素，就像您在 keyup 事件中所做的那样，那么它们对于 DOM 来说是新的，并且没有与原始 trs 相同的处理程序。如果您将其附加到表中，则处理程序会说我包含的所有trs 都必须使用此处理程序。这包括在 DOM 加载后生成的trs。