javascript - Bootstrap 弹出窗口中的 HTML 标签不会呈现

Question

我遇到了问题，我无法弄清楚为什么弹出窗口内的 HTML 标签不会被渲染。

JS在这里摆弄:http://jsfiddle.net/792xcgju/

    <!-- Popover #1 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="top">Popover Example</a>

<hr>

<!-- Popover #2 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</a>



<!-- Content for Popover #1 -->    
<div id="a1" class="hidden">
    <div class="popover-heading">This is the heading for #1</div>

    <div class="popover-body">


      <div class="pagination_content">
          <div class="page-jump-form">
          <div class="input-group input-group-sm">
              <input type="number" class="inputbox form-control"  min="1" max="999999" />
            <div class="input-group-btn">
              <input type="button" class="btn btn-default btn-sm" value="{L_GO}" />
            </div>
          </div>
        </div>  
      </div> 


    </div>
</div>   

<!-- Content for Popover #2 -->
<div id="a2" class="hidden">
    <div class="popover-heading">This is the heading for #2</div>

    <div class="popover-body">This is the body for #2<br>
        With <b>html</b> content    
    </div>
</div>

JS:

    $(function(){
    $("[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();
        }
    });
});

弹出窗口:

<!-- Content for Popover #1 -->  

无法显示代码。

<!-- Content for Popover #2 -->  

工作正常，但它只是基于文本。

我做错了什么？

Answer 1

您只需添加到选项

sanitize: false

它不会清理内容，并根据需要呈现输入字段，如此处选项中所列:https://getbootstrap.com/docs/4.3/components/popovers/#options

完整示例:

$(function(){
  $("[data-toggle=popover]").popover({
    sanitize: false // <-- ADD HERE
    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();
    }
  });
});