Popover沒有彈出

Question

我想顯示一個彈出窗口，當我點擊一個href，我正在動態追加，但popover不彈出。

我試圖用下面的代碼來實現這個壯舉。

<div id="myPopoverContent"> 
    ...stuff... 
</div> 

<div id="div3" style= "width:200px;height:200px;"> 
</div> 
<div id = "div4"></div> 

下面是jQuery的部分：

$(document).on("click","#div3", function(index){ 
     var $div2 = $("<a id='div2' rel = 'popover' data-container='body' data-toggle='popover' data-placement='right' data-html='true'>bla</a>"); 
     $("#div4").append($div2); 
     console.log("here2"); 

    }); 
//Popover part 
    $('[data-toggle=popover]').popover({ 
     content: $('#myPopoverContent').html(), 
     html: true 
    }).click(function() { 
     $(this).popover('show'); 
    }); 

但是我試圖添加酥料餅設置手動以及下文但不成功。

var popOverSettings = { 
    placement: 'bottom', 
    container: 'body', 
    html: true, 
    selector: '[rel="popover"]', //Sepcify the selector here 
    content: function() { 
     return $('#popover-content').html(); 
    } 
} 

$('body').popover(popOverSettings); 

請注意所有的jQuery都在document ready之下。

所有應該導致這樣的事情：

$('[data-toggle=popover]').popover({ 
 
    content: $('#myPopoverContent').html(), 
 
    html: true 
 
}).click(function() { 
 
    $(this).popover('show'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div id="myPopoverContent"> 
 
    ...stuff... 
 
</div> 
 
<a ng-href = "" data-toggle="popover"><span class="badge">12</span> You have 12 messages.</a>

Answer 1

您可以在創建jQuery對象後初始化酥料餅。例如：

$(document).on("click","#div3", function(index){ 
    var $div2 = $("<a id='div2' rel = 'popover' data-container='body' data-toggle='popover' data-placement='right' data-html='true'>bla</a>"); 
    $("#div4").append($div2); 

    $div2.popover({ 
     content: $('#myPopoverContent').html(), 
     html: true 
    }).click(function() { 
     $(this).popover('show'); 
    }); 

    console.log("here2"); 
}); 

見http://jsfiddle.net/DTcHh/27713/