javascript - HTML 未在弹出内容的 Bootstrap 中执行

Question

我试图在弹出窗口内容中执行 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>

我想看看:

这是第一个玩家的内容。

我实际得到的是:

< p>这是第一个玩家的内容。

我的最终目标是使用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();
    };