Question

我正在尝试使用jQuery在JavaScript中编写逻辑，这样每次用户在文本框内并点击回车键时，都会在文本框内创建一个新的文本框。逻辑在第一个文本框上工作，但当我转到其中一个文本框时，在创建的第一个文本框中输入，在该文本框中按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>

Answer 1

事件处理程序仅绑定到页面上的现有元素。因此，使用事件委派，您可以绑定到祖先元素，但适用于其子节点。像这样更改事件处理程序：

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

Answer 2

var i = 1;
$('#box1').on('keyup', '.ti', function(e){
    if (e.which == '13'){
        $(this).parent().find('button:last').before('<input type="text" class="ti" id="t'+ (++i) +'" placeholder="Enter to do">');
    }
});

Answer 3

这是因为当您第一次绑定事件时“新创建的 .t1 不存在”“它们尚未附加到DOM”

这是使用事件委托解决的;将您的事件绑定到已经存在的父元素。

你可以像

一样使用它

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

您还可以使用文档或正文作为 t1 的父级，但不建议将其用于性能http://api.jquery.com/on/#event-performance < / p>

Answer 4

<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>

好吧，我曾经用这种方式解决这个问题，但上面的解决方案看起来好多了。我必须检查一下。

按Enter键时，jQuery创建文本框

4 个答案: