Javascript 在td on keypress jQuery中添加多个div

我在

div

中有一个输入文本框，它位于

td

中，现在当用户输入一些文本并按enter键时，它应该在同一td中添加一个额外的div with input box。目标是在后续行中具有多个值

我可以在按键上添加div，但这里的问题是我不能让按键只启动一次。我只用国旗让它开火过一次，但在我的情况下它不起作用

在按键事件之前

<div id="grid">
<table>
<tr>
<td class="first-row">
<div><input class ="td-input"></input></div>
</td>
</tr></table>

在按键上添加div后，dom如下所示

<div id="grid">
<table>
<tr>
<td class="first-row">
<div><input class ="td-input"></input></div>
<div><input class="td-input"></input></div>
</td>
</tr></table>

JQuery

$('#grid').on('keypress','td.first-row > div input.td-input', 
function(event){
var key = (event.keyCode ? event.keyCode : event.which);
var currentTD,addDiv;
if(key == '13'){
currentTD = $(this).closest('td');
addDiv = '<div><input class="td-input"></input></div>';
currentTD.append(addDiv);
}
});

$（“#网格”）。在（'keypress'，'td.first-row>div input.td input'上，
功能（事件）{
var key=（event.keyCode？event.keyCode:event.which）；
var currentTD，addDiv；
如果（键=='13'）{
currentTD=$（this）.closest（'td'）；
addDiv=''；
当前td.append（addDiv）；
}
});

我希望输入文本框中的每个按键只添加一次“div”。 对于我的代码，如果按两次enter键，将添加2个div

请参考下图了解输出

$（“#网格”）.on（'keypress'，'td.first-row>div input.td input'，函数（事件）{
var key=（event.keyCode？event.keyCode:event.which）；
var currentTD，addDiv；
如果（键=='13'）{
currentTD=$（this）.closest（'td'）；
addDiv=''；
当前td.append（addDiv）；
}
});
您只需使用一个命名的事件处理程序，然后在其完成之前取消注册先前注册的处理程序

另外，
keypress
是测试回车键的错误事件（对于不可打印的字符不触发）。为此，请使用
keydown

最后，
input
元素没有结束标记（
）。这是无效的HTML


$（'td.first-row>div input.td input'）。on（'keydown'，makeInput'）；
函数makeInput（事件）{
var key=event.keyCode | | event.which；//只需检查哪个存在
如果（键=='13'）{
//为只使用一次的值设置变量是没有意义的
$（this）.closest（'td'）。append（''）；
//只需取消注册当前注册的回调
$（'td.first-row>div-input.td-input'）.off（'keydown'，makeInput'）；
}
}

尝试使用
标记


let data=[''”；
函数设置值（inp，i）{
数据[i]=输入值；
}
功能添加（e，i）{
如果（e.key！=“输入”| i+1s.replace（/\${（.*）}/g，（x，g）=>o[g]）；
cell.innerHTML=data.map（（v，i）=>inj（t，{val:v.replace（/“/g，”），i}））.join（“”）
}
显示（数据）；
td{边框：1px纯黑；}
如果只允许输入中的单个enter插入新输入，因为您已经在使用委托，您可以将其更改为测试输入是否没有类。一旦为输入处理事件处理程序，通过向其添加类，您可以确保在以后的输入中不会重复该事件处理程序


$（'#grid'）。在（'keypress'，'td.first-row>div input.td input:not（.processed'），函数（事件）{
var key=（event.keyCode？event.keyCode:event.which）；
如果（键==13）{
var$this=$（this）；
var$td=$this.closest（'td'）；
$td.追加（“”）；
$this.addClass（'processed'）；
}
})；

jQuery代码的底部片段，如何执行它来创建绑定？我在文档准备中使用上面的jQuery片段，并将keypress事件绑定到输入框，这样当用户键入并按Enter键时，它会触发事件。因此，您只会在（）

语句一次？我刚刚尝试了你的可运行代码段。反复在第二个框中按enter键，每次只会插入一个新输入。是的，我想要的是，无论我在第二个输入框中按多少次enter键，它都只会添加一个输入框，但现在它会为每个键输入添加一个输入框。我明白你的意思了，如果我想添加一个输入框呢更多div。在本例中使用off只会添加一个div，但如果我希望用户通过按enter键添加所需的div，但每个输入框应对应一个键enter事件。对不起，如果我不清楚我的解释，我们是否可以限制用户在同一输入上按enter键两次或更多次时添加新输入？您的方法是错误的很有趣，很高兴我从你的代码中学到了一些东西，但不幸的是ES6在我的环境中不兼容。谢谢。