Javascript 动态添加的Textarea focus（）无法使用CHROME扩展

我已经看到很多问题，但似乎我遗漏了一些东西

单击按钮时，我正在附加一个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();
}

html：

<div class="todosContainer">

</div>

---

附加的

是一个与包装器div关联的

类

。因此它不会得到关注。请尝试使用以下代码：

$('.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).find("#todoInput").focus();
});

$（'.todosContainer'）。在（'click'，'ion ios close outline'，函数（）{
让myTodoTemplate
';
$（'.todoContainer'）.append（myTodoTemplate）；
$（'.attached'）.fadeIn（400）.find（“#todoInput”）.focus（）；
});

尝试使用。因为它是

.attached

div的子项

     $('.todosContainer').on('click', '.attached', function() {
          $(this).find('textarea').focus();
          // or
          //$(this).find('#todoInput').focus();
        });

---

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

$（'.todoContainer'）。在（'click'，'add'，function（）上{
让myTodoTemplate=$（''）；
myTodoTemplate.hide（）；
$（'.todoContainer'）.append（myTodoTemplate）；
fadeIn（400，函数（）{
myTodoTemplate.find（'textarea'）.focus（）；
})
});

添加
您关注的是所附的课程
。相反，您必须关注文本区域，即
todoInput

$('.todosContainer').on('click', '.attached', 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();
  })
    $(this).find("#todoInput").focus();
});

$（'.todosContainer'）。在（'click'，'.attached'，function（）上{
让myTodoTemplate=$（''）；
myTodoTemplate.hide（）；
$（'.todoContainer'）.append（myTodoTemplate）；
fadeIn（400，函数（）{
myTodoTemplate.find（'textarea'）.focus（）；
})
$（this.find（“#todoInput”）.focus（）；
});
我不知道为什么每个人都在使用“查找”。这对我很有用：


$（'.todosContainer'）。在（'click'，函数（）{
让myTodoTemplate=`
`;
$（'.todoContainer'）.append（myTodoTemplate）；
$（'todoInput'）.fadeIn（400，函数（）{$（'todoInput'）.focus（）；}）
})

点击我
试试代码：


.todosContainer
{
颜色：红色；
}
.附件
{
}
.OneToDo模板
{
}

$（文档）.ready（函数（）{
$（'.todosContainer'）。单击（函数（）{
$（'.todoContainer'）.fadeOut（）；
var myTodoTemplate=''；
$（'.todoContainer'）.append（myTodoTemplate）；
$（'#todoInput'）.first（）.focus（）；
$（'.todoscanner'）.fadeIn（200）；
});
});
点击
不知何故，这些答案都不起作用。这是一个chrome扩展。。。也许这会有一些影响？该死的，这让我很沮丧。@WalterMonecke这很奇怪-当你运行上面的代码片段时，它不起作用？尝试使用mint chrome/firefox even edge。上面的代码片段可以工作，但不在chrome扩展中。也许这是一个bug？@WalterMonecke这是我的猜测-扩展没有正确解析Javascript。在运行代码/此处的部分答案之前，请尝试激活控制台-是否有任何错误消息？@WalterMonecke有帮助吗？
$('.todosContainer').on('click', '.attached', 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();
  })
    $(this).find("#todoInput").focus();
});