javascript - 在刷新页面之前无法重复获得焦点

Question

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

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

当“add a footnote”链接被点击后隐藏时提示我设置autofocus textarea的“footnote form”。 “autofucus”工作正常。

$('.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);

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

清除了表单

$footnotesTop.find(".footnote-form").html("")。现在页面显示文章和新添加的脚注。

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

如何在第二次点击事件中获得表单焦点。

Answer 1

您需要使用委托(delegate)事件处理程序。 js 代码 $('.footnote-link a').on('click', function (e) { 仅应用于 jQuery 在加载页面时使用该选择器找到的元素。

尝试 $( document ).on('click', '.footnote-link a', function (e) {。您可以使用更紧凑的选择器而不是 document - 看起来像 .footnote 将根据我所看到的进行工作。

jQuery delegated events tutorial