Question

当我点击动态追加的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下。

所有这些都应该导致这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以在创建jQuery对象后初始化popover。例如：

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

Popover没有弹出

1 个答案: