Javascript <；自动对焦>；在刷新页面之前无法重复获取焦点

我在一篇文章的底部设计了一个脚注来注释后续状态

<article class="col-md-12">
</article>
<div class="col-md-12 footnote">
    <a href="{% url 'article:footnote_add'%}">add a footnote</a>
</div> 

表单使用Ajax提交到服务器，然后我通过

$footnotesTop.find（“.footnote表单”）.html（”

）。现在页面显示文章和新添加的脚注

但是，如果我再次单击“添加脚注”，它将无法像第一次那样自动获得焦点，直到我刷新页面以单击为止

---

如何在第二次单击事件期间获取表单焦点。

您需要使用委派的eventHandler。js code

$（'.footnote link a'）。on（'click'，函数（e）{

仅在加载页面时应用于jQuery使用该选择器查找的元素

试试

$（文档）。在（'click'，'）上。脚注链接a'，函数（e）{

。您可以使用更紧密的选择器，而不是文档-看起来像

。脚注

将根据我看到的内容工作

---

谢谢，这是通常使用的$（正文）还是$（文档）而不是指定的选择器？不，不是真的。对于包含大量动态添加内容和大量事件处理程序的页面，可能会有一些延迟。如果您知道您将修改dom，并且您知道页面上不会有太多的元素，那么实践是可以的。

$('.footnote-link a').on('click', function (e) {
    e.preventDefault();
    ...
    var $footnoteForm = $(`
<form class="article-footnote-form footnote-form" style="margin-top:10px" >
<div class="form-group row">
    <div class="col-md-9">
        <textarea class="form-control" name="footnote" rows="3" autofocus></textarea>
    </div>
    <div class="col-md-3">
        <button class="btn btn-primary" type="submit" id="articleFootnoteBtn">Add Annotation</button>
    </div>
</div>
</form>`);
     $articleFootnoteLink.parent().hide();
     $articleFootnoteLink.parent().after($footnoteForm);