Bootstrap 4.3.1 Popover不在Popover内容内显示表格 [英] Bootstrap 4.3.1 Popover Does Not Display Table Inside Popover Content
问题描述
我有一个Bootstrap 4.3.1 Popover,其内容嵌入了表格.显示所有内容,但不显示该表.在下面的代码中,我尝试了content
和直接$('#a02').html()
的功能.
I have a Bootstrap 4.3.1 Popover with a Table embedded inside the content. Everything is displayed but the table is not. In the below code, I've tried both the function for content
as well as directly $('#a02').html()
.
$("[data-toggle=popover]").popover({
html: true,
content: function() { return $('#a02').html(); }, // Also tried directly without function
title: 'Test'
}).click(function() {
$(this).popover('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" data-toggle="popover" data-trigger="focus" data-placement="right">
Click Here for Popover
</a>
<div id="a02" style="display: none;">
Some text before table
<div>
<table width="100%">
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
有些人试图向我展示可以与Bootstrap 3一起使用的JSFiddle.我采用了他们的JSFiddle,只是将Bootstrap引用更改为4,但它坏了. Bootstrap 3 JSFiddle | Bootstrap 4 JSFiddle
Some people have tried showing me a JSFiddle that works with Bootstrap 3. I took their JSFiddle and merely changed the Bootstrap refs to 4, and it broke. Bootstrap 3 JSFiddle | Bootstrap 4 JSFiddle
推荐答案
工具提示和Popover使用内置的清理工具来清理接受HTML的选项
Tooltips and Popovers use a built-in sanitizer to sanitize options which accept HTML
https://getbootstrap.com/docs/4.3/getting-started /javascript/#sanitizer
尝试一下:
$(function() {
$.fn.popover.Constructor.Default.whiteList.table = [];
$.fn.popover.Constructor.Default.whiteList.tr = [];
$.fn.popover.Constructor.Default.whiteList.td = [];
$.fn.popover.Constructor.Default.whiteList.th = [];
$.fn.popover.Constructor.Default.whiteList.div = [];
$.fn.popover.Constructor.Default.whiteList.tbody = [];
$.fn.popover.Constructor.Default.whiteList.thead = [];
$("[data-toggle=popover]").popover({
html: true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
这篇关于Bootstrap 4.3.1 Popover不在Popover内容内显示表格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!