Всплывающее окно Bootstrap не работает, когда в HTML

Question

Когда загрузочный попутер выводится в html(), он не работает. Показывается только заголовок. Есть ли какое-то решение для этого?

Вы также можете увидеть скрипку

$( "button" ).click(function() {
 $("p").html('<a href="#" title="hello, this is title" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>');
});

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<p>Click the button to add popover</p>
<button class="btn">button</button>
</div>

Answer 1

$('[data-toggle="popover"]').popover(); вызовите этот код после обновления html в теге <p>. Вы должны повторно инициировать после добавления / переписывания HTML. Вы должны добавить вышеуказанный код внутри события клика.

Код внутри $(document).ready() работает только при загрузке страницы. Чтобы достичь на динамически созданном элементе, вы должны инициировать после создания / обновления элемента.

$( "button" ).click(function() {
    $("p").html('<a href="#" title="hello, this is title" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>');
    $('[data-toggle="popover"]').popover();
});

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <p>Click the button to add popover</p>
    <button class="btn">button</button>
</div>

Answer 2

Всплывающее окно должно быть инициировано после нажатие кнопки. Готовый документ будет загружен только один раз при загрузке страницы.

$("button").click(function() {
   $("p").html('<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>');
    $('[data-toggle="popover"]').popover();   
});

https://jsfiddle.net/fLcz90q3/