javascript - 动态添加的 Textarea focus() 不起作用 CHROME EXTENSION

Question

我看到了很多很接近的问题，但似乎我遗漏了什么。

我在单击按钮时附加一个 html div 标记。附加的 div 标签有一个应该获得焦点的 textarea 标签。

脚本:

$('.todosContainer').on('click', '.ion-ios-close-outline', function () {
    let myTodoTemplate = `
                    <div class="oneTodoTemplate attached">
                        <textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea>
                    </div> `;

    $('.todosContainer').append(myTodoTemplate);
    $('.attached').fadeIn(400).first().focus();
}

我也试过:

$('.attached').fadeIn(400, function() {
    $(this).find(">:first-child").focus();
});

HTML:

<div class="todosContainer">

</div>

Answer 1

您需要添加的 html 的实例，您可以通过使用 jquery 附加预先创建的 html 来实现。在添加之前隐藏它，淡入，等到完成并聚焦。

$('.todosContainer').on('click', '.add', function() {

  let myTodoTemplate = $('<div class="oneTodoTemplate attached"><textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea></div>');

  myTodoTemplate.hide();
  $('.todosContainer').append(myTodoTemplate);
  myTodoTemplate.fadeIn(400, function() {
    myTodoTemplate.find('textarea').focus();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="todosContainer"> <span class="add">ADD</span> </div>