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

2023-12-09

我遇到了一个问题,我无法弄清楚为什么弹出窗口内的 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 -->  

无法显示代码。

The

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

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

我究竟做错了什么?


您只需添加到选项中

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();
    }
  });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap 弹出窗口中的 HTML 标签不会呈现 的相关文章

随机推荐