弹出框不弹出答案

【问题标题】：Popover not popping up弹出框不弹出
【发布时间】：2016-12-08 11:38:02
【问题描述】：

我想在点击我动态附加的href 时显示一个弹出框，但弹出框没有弹出。

我尝试使用以下代码实现这一壮举。

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

【问题讨论】：

您的 sn-p 似乎工作正常。有什么问题？
片段作品....
我添加了 sn-p 来向您展示我想要实现的目标。我的意图是通过动态附加 <a> 来实现这一目标。
我认为你应该使用下面的语法来创建锚标签： var newtag = document.createElement( "a" );然后你应该使用下面的语法设置它的属性： jQuery(yourtag).attr(attname,attvalue);最后追加它。

标签： jquery html twitter-bootstrap-3 popover

【解决方案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/

【讨论】：