Javascript jQuery在按enter键时创建文本框

我尝试使用jQuery在JavaScript中编写逻辑，这样每当用户在文本框内并按下enter键时，就会在文本框内创建一个新的文本框。该逻辑在第一个文本框中起作用，但当我转到在创建的第一个文本框中按enter键的其中一个文本框时，在该文本框中按enter键不会创建新的文本框。有没有办法解决这个问题？谢谢

<div class = "wrapper">
<div class = "box" id = "box1">
<input class = "ti"  id = "t1" type="text"  placeholder= "Enter to do" >
<button  id = 'b1' type="button" onclick = "breakTheseDown()">Ok Lets Break These              
Down</button>
</div>
</div>

<script>
$( ".ti" ).on( "keydown", function( event) {
$( "#log" ).html( event.type + ": " +  event.which );
if (event.which == '13') {
    var id = event.target.id;
$("#" + id).parent().append("<input class = 'ti'  id = 't1' type='text'  placeholder=      
'Enter to do' >");
}
});</script>

好吧，让我们打破这些
向下
$（“.ti”）。在（“按键向下”，函数（事件）{
$（“#log”）.html（event.type+”：“+event.which）；
如果（event.which=='13'）{
var id=event.target.id；
$（“#”+id）.parent（）.append（“”）；
}
});

事件处理程序仅绑定到页面上的现有元素。因此，使用事件委派，您可以绑定到祖先元素，但应用到其子元素。更改事件处理程序，如下所示：

$( document.body ).on( "keydown", ".ti", function( event) {
    // your function as is
});

var i=1；
$（'#box1'）.on（'keyup'，'.ti'，函数（e）{
如果（e.which=='13'）{
$（this.parent（）.find（'button:last'）。在（''）之前；
}
});

发生这种情况的原因是，当您第一次绑定事件时，新创建的.t1不存在，“它们还没有连接到DOM”

这是通过使用事件委托来解决的；将事件绑定到已存在的父元素

你可以像这样使用它

$( "#box1" ).on( "click", "tr", function() {
  // ...
});

您也可以将文档或正文用作t1的父级，但不建议将其用于性能

函数initEvents（）{
$（“.ti”）。打开（“按键”，输入函数）；
}
函数输入函数（事件）{
$（“#log”）.html（event.type+”：“+event.which）；
如果（event.which=='13'）{
var id=event.target.id；
$（“#”+id）.parent（）.append（“”）；
initEvents（）；
}
}
$（文档）.ready（initEvents）；

---

嗯，我以前是这样解决这个问题的，但上面的解决方法似乎要好得多。我必须检查一下。

您使用的是哪个jquery版本？？？这是一条路，因为他先回答了，我会给他投票：）但是我会使用HOBA下面的建议，并将其委托给容器。当我看到cyk回答时，我正在处理您的问题，虽然我认为@SebasSBM解决方案可能会更好，因为它不会弄乱文档正文，但我还是按照您在中提出的问题编写了一个代码笔。感谢cyk教我一种新的绑定事件的方法！@Ihab Khattab指出了绑定到远祖的性能含义，这是值得称赞的。这并没有错，可能是我本机的做法，但是jquery委托语法非常好，为什么不使用它呢：）因为我不知道…：PWell还有一个问题，如果运行多次，因为实际上没有删除.ti元素上的先前事件，这将创建重复的事件。如果在原始框中多次按enter键，您可以看到这一点。make1->3->etc等首选方法是传入创建的元素，并在创建时将事件附加到该元素。这解释了我正在创建的页面上发生的一些奇怪的事情。很高兴知道。谢谢：）

$( "#box1" ).on( "click", "tr", function() {
  // ...
});

<script>
    function initEvents() {
        $( ".ti" ).on( "keydown", enterFunction);
    }

    function enterFunction(event) {
        $( "#log" ).html( event.type + ": " +  event.which );
        if (event.which == '13') {
            var id = event.target.id;
            $("#" + id).parent().append("<input class = 'ti'  id = 't1' type='text' placeholder= 'Enter to do' >");
            initEvents();
        }
    }
    $(document).ready(initEvents);        
</script>