jquery - Bootstrap 4.3.1 弹出窗口不显示弹出窗口内容内的表格

Question

我有一个 Bootstrap 4.3.1 弹出窗口，内容中嵌入了一个表格。所有内容都已显示，但表格未显示。在下面的代码中，我尝试了 content 以及直接 $('#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

Answer 1

工具提示和弹出窗口使用内置清理程序来清理接受 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();
    }
  });
});