Добавить несколько делений внутри тд на нажатие клавиши JQuery

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 добавлялся только один раз для каждого нажатия клавиши в текстовом поле ввода.С моим кодом будут добавлены 2 деления, если дважды нажать клавишу ввода.

Пожалуйста, обратитесь к изображению ниже для вывода.

$('#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

Если вы хотите, чтобы только один элемент ввода вводил новый элемент ввода, так как вы уже используете делегата, вы можете изменить его, чтобы проверить, что для элемента ввода нет класса.Как только обработчик события обработан для ввода, добавив в него класс, вы гарантируете, что он не будет повторяться для будущих вводов.

$('#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>

Answer 2

попробуйте использовать <template> тег

let data = [''];

function setValue(inp, i) {
  data[i] = inp.value;
}

function add(e,i) {
  if (e.key != 'Enter' || i+1<data.length) return;
  data.splice(i+1,0,'');
  show(data);
  cell.children[i+1].children[0].focus();
}

function show(data) {
  let t= item.innerHTML;
  let inj = (s,o)=>s.replace(/\${(.*?)}/g,(x,g)=>o[g]);
  cell.innerHTML=data.map((v,i)=>inj(t,{val:v.replace(/"/g,"&quot;"),i})).join('')
}


show(data);

td { border: 1px solid black; }

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

<template id="item">
  <div>
    <input 
      class="td-input" 
      onkeypress="add(event,${i})" 
      oninput="setValue(this,${i})" 
      value="${val}" />
  </div>
</template>

Answer 3

Вы просто используете именованный обработчик события, а затем метод JQuery .off() для отмены регистрации ранее зарегистрированного обработчика непосредственно перед его завершением.

Кроме того, keypress являетсянеправильное событие для проверки клавиши ВВОД (не запускается для непечатаемых символов).Для этого используйте keydown.

Наконец, элемент input не имеет закрывающего тега (</input>).Это неверный HTML.

$('td.first-row > div input.td-input').on('keydown', makeInput);

function makeInput(event){
  var key = event.keyCode || event.which;  // Just need to check which one exists
  if(key == '13'){
    // Doesn't make sense to set up variables for values you'll only use once
    $(this).closest('td').append('<div><input class="td-input"></div>');
    
    // Just de-register the currently registered callback
    $('td.first-row > div input.td-input').off('keydown', makeInput);
  }
}

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