$（）。html（）之后无法输入空白表格textarea；

Question

我正在写一个像SO评论一样的脚注，

模板：

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

脚本：
单击“添加脚注”时，它会提示一个脚注表单，

$(document).ready(function () {
$('.add-article-footnote').on('click', function (e) {
    e.preventDefault();
    var $addArticleFootnote = $(".add-article-footnote");
    var footnoteForm = `
<br class="cbt">
<form action="" class="footnote-form">
<div class="form-group row">
<div class="col-md-9">
    <textarea class="form-control" name="footnote" rows="3"></textarea>
</div>
<div class="col-md-2">
    <button class="btn btn-primary" id="footnoteBtn">Add Annotation</button>
</div>
</div>
</form>`;
    $addArticleFootnote.html(footnoteForm);
});//click event
})

但是，出现表格时，我无法单击进入空白文本区域，但是可以右键单击进入，

如果我立即单击，则竖线会在行的开头闪烁。

Answer 1

您将表单插入.add-article-footnote元素中。每次触发jQuery函数的相同元素。这意味着，即使您的表单在那里，jQuery函数也会再次被触发，该表单将被重新初始化，因此您无法单击它。

您可以执行以下操作：

$(document).on('click', '.add-article-footnote', function(e) {
  if (!$(this).hasClass('form-active')) {
    e.preventDefault();
    var $addArticleFootnote = $(".add-article-footnote");
    $addArticleFootnote.addClass('form-active');
    var footnoteForm = `
     <br class="cbt">
     <form action="" class="footnote-form">
     <div class="form-group row">
     <div class="col-md-9">
          <textarea class="form-control" name="footnote" rows="3"></textarea>
     </div>
     <div class="col-md-2">
         <button class="btn btn-primary" id="footnoteBtn">Add Annotation</button>
     </div>
     </div>
     </form>`;
    $addArticleFootnote.html(footnoteForm);
  }
});

因此，当您将表单添加到页面时，将类form-active添加到add-article-footnote元素，然后在执行函数之前检查它是否已经具有该类。如果为true，则无需再次执行该功能。另一种可能性是单击时删除add-article-footnote元素，并将表单插入其父元素。