Question

在html()中输出bootstrap popover时，它无法正常工作。仅显示标题。有没有解决这个问题？

您还可以看到fiddle

＆＃13;

$( "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();   
});

＆＃13;

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

＆＃13;

Answer 1

单击按钮后，应启动popover 。文档就绪只会在加载页面时加载一次。

$("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();代码中的html后，

<p>调用此代码。你必须在追加/重写html后重新发起。您必须在点击事件中添加上述代码。

$(document).ready()内的代码仅适用于页面加载时。要实现动态创建的元素，必须在创建/更新元素后启动。

＆＃13;

$( "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();   
});

＆＃13;

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

＆＃13;

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

2 个答案: