Bootstrap popover内部的HTML标签未呈现 [英] HTML tags inside Bootstrap popover are not rendered

问题描述

我遇到了一个问题，我无法弄清为何无法显示弹出窗口中的HTML标记。

I'm having an issue and I cannot figure out why the HTML tags inside a popover will not get rendered.

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 -->  

工作正常，但基于纯文本。

works fine but its just text based.

我在做什么错了？

推荐答案

您只需添加选项即可

sanitize: false

不清除内容，并根据需要呈现输入字段，如此处的选项所示： https://getbootstrap.com/docs/4.3/components/popovers/#options

and it will not sanitize the contents, and renders the input fields as desired, as listed in the options here: 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();
    }
  });
});

这篇关于Bootstrap popover内部的HTML标签未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！