引導3動態生成的內容彈出不起作用

Question

我試圖在動態生成的內容上啓用引導3彈出。香港專業教育學院看着其他職位，以他們如何得到他們的工作，但IM努力理解爲什麼這不會工作

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

我似乎無法看到在Firebug的任何錯誤，但沒有任何理由，爲什麼我不能連接這是在被調用時的事件嗎？

Answer 1

對於第一個點擊，你需要手動顯示酥料餅

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>') 
 
})

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

Answer 2

問題

.popover()僅初始化酥料餅。這意味着你的代碼當前所做的是在點擊事件被觸發時設置彈出窗口（我猜它會在第二次點擊中顯示，因爲它是由第一次設置的 - 下一個問題是，現在你試圖在第二次點擊時重新設置它）。

解決方案

如果是動態生成的內容，您應該相當初始化酥料餅上直接當它插入DOM。就像：

// 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 
});