Bootstrap popover在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

單擊按鈕后應啟動彈出窗口。 准備就緒的文檔僅在頁面加載后加載一次。

$("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/

Answer 2

$('[data-toggle="popover"]').popover(); 在<p>標記中更新html后調用此代碼。 您必須在添加/覆蓋html之后重新啟動。 您必須在click事件中添加以上代碼。

$(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>