无法将 <form> 注入弹出框内容

Unable to inject <form> into popover content

我正在尝试显示一个弹出窗口,其中包含我通过 AJAX 从 API 获得的内容。内容包含一些 HTML 标签,包括带有 <textarea><button><form><br/>s、<a>s 和 <time>s.

我面临的问题是其中一些根本没有添加(没有显示,并且在我检查时没有在代码中显示),而其他的则完全没问题。

下面是我排除的几件事:

如果您知道问题出在哪里,或者有任何搜索线索,谢谢!

这是我正在使用的相同代码的演示:

$(function() {
  var content = '<form><textarea></textarea></form>';
  button = $("a#myButton")
  button.popover({
    'html': true,
    'content': content, // content that contains a <form> and <textarea, it should not injected in the popover
    'trigger': 'click',
    'placement': 'bottom'
  });
  button.parent().append(content); // but it can perfectly be added elsewhere
  $("a#myOtherButton").popover({
    'html': true,
    'content': 'hello<br/><br/>there', // this content should be working perfectly fine
    'trigger': 'click',
    'placement': 'bottom'
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>


<div id="myDiv">
  <a id="myButton" class="btn btn-primary" style="color:white;">This is a button</a>
  <a id="myOtherButton" class="btn btn-primary" style="color:white;">This is another button</a>
</div>

您需要添加选项 'sanitize': false

$(function() {
  var content = '<form><textarea></textarea></form>';
  button = $("a#myButton")
  button.popover({
    'html': true,
    'sanitize': false,
    'content': content, // content that contains a <form> and <textarea, it should not injected in the popover
    'trigger': 'click',
    'placement': 'bottom'
  });
  $("a#myOtherButton").popover({
    'html': true,
    'content': 'hello<br/><br/>there', // this content should be working perfectly fine
    'trigger': 'click',
    'placement': 'bottom'
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>


<div id="myDiv">
  <a id="myButton" class="btn btn-primary" style="color:white;">This is a button</a>
  <a id="myOtherButton" class="btn btn-primary" style="color:white;">This is another button</a>
</div>