Question

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

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

现在，我排除了以下几件事：

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

如果您对问题出在哪里有任何了解，或者对搜索有任何帮助，谢谢！

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

<time>

$(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'
  });
});

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>插入弹出窗口内容

1 个答案: