Bootstrap popover在html中输出时不起作用

Question

When bootstrap popover is outputed in html() it doesn't work. Only the title is shown. Is there any fix to this?

You can also see the fiddle

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

The popover should be initiated after the button is clicked. The document ready will only load once when the page is loaded.

$("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(); call this code after updating html in <p> tag. you have to re-initiate after appending/over writing html. You have to add above code inside click event.

Code inside $(document).ready() will only works for when page loads. To achieve on dynamically created element, you have to initiate after creating/updating element.

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