0
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');
});
iは同様に、以下のようしかし無駄に手動で設定ポップオーバーを追加しようとしたが。
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
です。あなたはjQueryオブジェクトを作成した後にポップオーバーを初期化することができます
$('[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>
あなたのスニペットは正常に動作しているようだ参照してください。どうした? – sam
スニペットが機能します.... –
スニペットを追加して、達成したいことを示しました。私の意図は、動的に追加された ''でそれを達成することです。 –