时间戳

首页 > 解决方案 > $().html() 后无法输入空白表单文本区域；

javascript - $().html() 后无法输入空白表单文本区域；

问题描述

我正在写一个类似 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
})

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

如果我立即单击，竖线会在行首闪烁。

在此处输入图像描述

标签： javascriptjquerydjango

解决方案

您将表单插入到.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元素，然后在函数执行之前检查它是否已经具有该类。如果为真，您将不再执行该功能。另一种可能性是add-article-footnote在单击时删除元素并将表单插入其父元素。

推荐阅读