Question

我正在文章底部设计一个脚注，以说明后续状态； </ p>

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

在单击“添加脚注”链接后将其隐藏，并提示我设置“ autofocus”和“ textarea”的“脚注形式”。 “ 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

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

尝试$( document ).on('click', '.footnote-link a', function (e) {。您可以使用更严格的选择器而不是文档-看来.footnote可以根据我所看到的来工作。

jQuery delegated events tutorial

<autofocus>在刷新页面之前无法反复获得焦点

1 个答案: