问题

Question

我正在尝试在动态生成的内容上启用bootstrap 3 popovers。我看过其他帖子，看看他们是如何让他们工作的，但是我很难理解为什么这不起作用

$(document).on('click','[data-toggle="popover"]', function(){
$(this).popover({
    content: _popovercontent,
    title:'Assignee',
    html:true
   });
});

我似乎无法在Firebug中看到任何错误，但是有什么理由说我在调用时无法将其附加到事件中吗？

Answer 1

问题

.popover()仅初始化弹出窗口。这意味着当触发点击事件时，您的代码当前所做的是设置弹出窗口（我猜测它会在第二次点击时显示，因为它将由第一次点击设置 - 下一个问题是现在你正试图在第二次点击时重新设置它。

解决方案

如果内容是动态生成的，则应该在将内容插入DOM时直接初始化其上的popover。类似的东西：

// The dynamically generated content
var $dynamicContent = $('<div><span data-toggle="popover"></span></div>');

// When you insert into the DOM, filter for you popover and initialize
$dynamicContent.appendTo('body').filter('[data-toggle="popover"]').popover({
  content: _popovercontent,
  title:'Assignee',
  html:true
});

Answer 2

首次点击时，您需要手动显示弹出窗口

＆＃13;

var _popovercontent = 'this is popover';
$(document).on('click', '[data-toggle="popover"]', function() {
  var $this = $(this);
  //if not already initialized
  if (!$this.data('bs.popover')) {
    $this.popover({
      content: _popovercontent,
      title: 'Assignee',
      html: true
    }).popover('show');
  }
});

$('button').click(function () {
    $('#ct').append('<a href="#" data-toggle="popover">Some content</a>')
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>


<button>Add</button>
<div id="ct"></div>

＆＃13;

动态生成的内容上的bootstrap 3 popover不起作用

2 个答案:

问题

解决方案