Question

我正在尝试在我的popover内容中执行HTML，但实际显示的是HTML代码而不是格式化文本。

HTML：

<li><a  id="pop1" class="icon-question-sign pop" href="player link" target="ifrm">player1</a></li>
<li><a  id="pop2" class="icon-question-sign pop" href="player link" target="ifrm">player2</a></li>

<div id="pop1_content" class="popSourceBlock">
<div class="popContent">
    <p>This is the content for the <strong>first</strong> player.</p>
</div>
</div>
<div id="pop2_content" class="popSourceBlock">
<div class="popContent">
    <p>This is the content for the <strong>second</strong> player.</p>
</div>

STYLE:
<style>
   .popSourceBlock {
    display:none;
  }
  </style>                

JAVASCRIPT CODE:

 <script>   
    $(".pop").each(function() {
    var $pElem= $(this);
   $pElem.popover(
        { trigger: "hover focus",
          HTML: true,
          content: getPopContent($pElem.attr("id"))
        }
    );
    });

    function getPopContent(target) {
        return $("#" + target + "_content > div.popContent").html();
    };
 </script>

我想看到：

这是第一个播放器的内容。

我实际得到的是：

＆LT; p＆gt;这是＆lt;的内容。强＆gt;首先＆LT; /强＆GT;播放器及LT。 / p为H.

我的最终目标是使用HTML代码来显示图片而不是文字。

Answer 1

这是因为你的HTML选项。

将其更改为小写，而不是大写。

Bootply

JS ：

   $(".pop").each(function() {
    var $pElem= $(this);
   $pElem.popover(
        { trigger: "hover focus",
          html: true,     //   <---------------  LOOK HERE
          content: getPopContent($pElem.attr("id"))
        }
    );
    });

    function getPopContent(target) {
        return $("#" + target + "_content > div.popContent").html();
    };

Answer 2

    for js:
   <script>
    $(document).ready(function(){
    $('#pop1').popover({
        html : true,
        content : function() {
            return $('#pop1_content').html();
        }
    });
            });
   </script>
   For html:
   <div id="pop1_content" class="popSourceBlock" style="display:none;">
   your inner html divs.....
   </div>

HTML不在popover内容的bootstrap中执行

2 个答案: