Блог

Я пытаюсь выполнить 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>Это содержимое для < strong>первого < /strong> проигрывателя.< /p>

Моя конечная цель — использовать HTML-код для отображения изображений, а не текста.

Это из-за вашего 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();
    };
 

     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>