如何从 bootstrap 中的弹出窗口获取弹出窗口

Question

我尝试了下面的代码，我没有得到第二个弹出窗口，我的方法似乎有一些问题，我不知道要得到第二个弹出窗口...

$(function() {
    $(".pendingList, .pendings").popover();
 });

.icon3{
 background: url('http://blog.flattr.net/wp-content/uploads/2011/09/Whosebug.png') 1px 1px no-repeat;
 background-position: center;
 height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="icon3 pendingList" data-toggle="popover" data-trigger="click" data-html="true" data-placement="bottom" 
             data-content="<a href='#' class='pendings' data-toggle='popover' data-trigger='click' data-html='true' data-placement='bottom' 
            data-content='test' >Pending(5)</a>"></div>

Answer 1

您的代码无效，因为当您执行 popover 方法时元素不存在。试试下面的代码，它工作正常！

$(function() {
    $(".pendingList").popover();
    $('.pendingList').on('inserted.bs.popover', function () {
      $(".pendings").popover();
    });
 });

.icon3{
 background: url('http://blog.flattr.net/wp-content/uploads/2011/09/Whosebug.png') 1px 1px no-repeat;
 background-position: center;
 height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="icon3 pendingList" data-toggle="popover" data-trigger="click" data-html="true" data-placement="bottom" data-content="<a href='#' class='pendings' data-toggle='popover' data-trigger='click' data-html='true' data-placement='bottom' data-content='test' >Pending(5)</a>"></div>

如何从 bootstrap 中的弹出窗口获取弹出窗口

How to get a popover from a popover in bootstrap

bootstrap-popover