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

Question

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

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

下面是我排除的几件事：

API发送的数据很好，如果我在其他地方注入它显示完美
AJAX 调用也可以正常工作

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

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

$(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>

Answer 1

您需要添加选项 '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>

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

Unable to inject <form> into popover content

javascript

bootstrap-4

popover

bootstrap-popover