使用无法定位的 JQuery 在 HTML 表中动态插入行 [重复]
Posted
技术标签:
【中文标题】使用无法定位的 JQuery 在 HTML 表中动态插入行 [重复]【英文标题】：Dynamically inserting rows in HTML table with JQuery that cannot be targeted [duplicate] 【发布时间】：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方法）。我认为你是正确的，这个问题与你所引用的问题之间存在相当多的重叠。我仍然很想知道为什么文本子节点（在 tr 元素。如果您在页面加载后创建 tr 元素，就像您在 keyup 事件中所做的那样，那么它们对于 DOM 来说是新的，并且没有与原始 trs 相同的处理程序。如果您将其附加到表中，则处理程序会说我包含的所有trs 都必须使用此处理程序。这包括在 DOM 加载后生成的trs。
他们是，只是您的委托选择器错误。您插入的 tr 没有像 DOM 准备好的其他人那样绑定...所以将 tbody 绑定到已经存在的 tr 上，然后查找 tr
$("tbody").on("keydown", "tr input", function()
$("tbody").on("keyup", "tr input", function(e)
$("tbody").on("click", "tr input", function()
演示：https://jsfiddle.net/ooavyybm/
【讨论】：
谢谢你，tymeJV！我现在对“on”方法的功能有了更好的理解。以上是关于使用无法定位的 JQuery 在 HTML 表中动态插入行 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
使用 Durandal 的 compose 时 JQuery 不定位 DOM 元素
如何使用 jquery 在 HTML 表中显示 json 内容
使用 jQuery 时如何在 html 表中输出数组的内容？