无法将 <form> 注入弹出框内容
Unable to inject <form> into popover content
我正在尝试显示一个弹出窗口,其中包含我通过 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>
您需要添加选项 '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>
我正在尝试显示一个弹出窗口,其中包含我通过 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>
您需要添加选项 '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>