javascript - 在按键jQuery的td内添加多个div

Question

我在 div 中有一个输入文本框，它位于 td 中，现在当用户输入一些文本并按回车键时，它应该添加一个带有输入的额外 div框到相同的 td。目标是在后续行中有多个值。

我可以在按键上添加 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);
}
});

我希望输入文本框上的每个按键仅添加一次“div”。使用我的代码，如果按 enter 两次，将添加 2 个 div。

输出请引用下图。

$('#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 class="additional-row"><input class="td-input"></input></div>';
					currentTD.append(addDiv);
			}
		});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
<table>
<tr>
<td>
<div><input class ="td-input" placeholder="Enter here column 1"></input></div>
</td>
<td class="first-row">
<div><input class ="td-input" placeholder="Enter here column 2"></input></div>
</td>
</tr>
</table>

Answer 1

如果您只想允许在输入上进行一次输入以插入新输入，因为您已经在使用委托(delegate)，您可以更改它以测试输入没有类。一旦为输入处理了事件处理程序，通过向其中添加类，您可以确保它不会在以后的输入中重复。

$('#grid').on('keypress', 'td.first-row > div input.td-input:not(.processed)', function(event) {
  var key = (event.keyCode ? event.keyCode : event.which);

  if (key == 13) {
    var $this = $(this);
    var $td = $this.closest('td');
    
    $td.append('<div class="additional-row"><input class="td-input"></input></div>');
    $this.addClass('processed');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
  <table>
    <tr>
      <td>
        <div><input class="td-input" placeholder="Enter here column 1"></input>
        </div>
      </td>
      <td class="first-row">
        <div><input class="td-input" placeholder="Enter here column 2"></input>
        </div>
      </td>
    </tr>
  </table>