javascript - 将光标放入动态添加的输入时出现问题

Question

根据我的演示代码，为什么我无法将光标移动到动态添加的输入中？正如您所看到的，我正在使用 .focus() 使用户能够开始输入文本，而无需单击此处，但它不起作用

$(".container").dblclick(function(e) {
  $(this).append($('<input type="text"/>').css({ //some CSS here
  }).focus());
});

.container {
  background: #ddd;
  height: 600px;
  position: relative
}

input {
  margin: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

</div>

Answer 1

您可以关注最后一个输入元素:

$(".container").dblclick(function(e) {
    $(this).append($('<input type="text"/>').css({ //some CSS here
    }));
    $("input:last").focus();
});

$(".container").dblclick(function(e) {
  $(this).append($('<input type="text"/>').css({ //some CSS here
  }));
  $("input:last").focus();
});

.container {
  background: #ddd;
  height: 600px;
  position: relative
}

input {
  margin: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

</div>