如何绑定动态元素上的引导popover [英] How to bind bootstrap popover on dynamic elements
问题描述
这是我的非动态列表的JavaScript
$ button [rel = popover]）popover（{
placement：'right'，
container：'body'，
html：true，
// content： < div style ='color：red'>这是你的div内容< / div>
content：function（）{
return $（'＃popover-content'）。html（） ;
}
}）
.click（function（e）{
e.preventDefault（）;
}）;
但是，它在动态列表中不能正常工作。当我点击两次按钮时，它可以显示出来，只显示我点击第一个时间的列表项之一。
MY html：
< li class ='project-name'>
< a>项目名称1
< button class =pop-function =popover>< / button>
< / a>
< / li>
< li class ='project-name'>
< a>项目名称2
< button class =pop-function =popover>< / button>
< / a>
< / li>
< / ul>
< div id =popover-contentstyle =display：none>
< button class =pop-sync>< / button>
< button class =pop-delete>< / button>
< / div>
我的动态JavaScript：
$（document）.on（click，＃project-list li，function（）{
var username = $ .cookie（username）;
var projectName = $（this）.text（）
$（li.active）。removeClass（active）;
$（this）.addClass（active）;
console.log（username：+ username +project name：+ projectName）;
}）;
$（document）.on（click，button [rel = popover]，function（）{
$（this）.popover（{
placement：'right'，
container：'body'，
html：true，
content：function（）{
return $（'＃popover-content'）点击（function（e）{
e.preventDefault（）;
}）
}）;
//当一个popover按钮点击
$（document）.on（click，button [rel = popover]，function（） {
$（button [rel = popover]）。not（this）.popover（'hide'）;
}）;
我已经搜索过类似的问题，但是我仍然找不到解决问题的人。如果有人有一些想法，请让我知道。谢谢你的帮助
更新
popover将具有一致的选择器，那么您可以使用popover构造函数的 selector 属性。
var popOverSettings = {
placement：'bottom'，
container：'body'，
html：true，
selector：'[rel =popover]'，//在这里解压缩选择器
content：function（）{
return $（'＃popover-content'）。html（）;
}
}
$（'body'）。popover（popOverSettings）;
其他方式：
- （标准方式）将弹出窗口重新绑定到要插入的新项目。将popoversettings保存在外部变量中。
- 使用
突变事件/Mutation Observer来标识特定元素是否被插入ul或元素。
源
var popOverSettings = {//保存设置以备以后使用
放置：'bottom'，
容器：'body'，
html：true，
// content：< div style ='color：red'>这是你的div内容< / div>
content：function（）{
return $（'＃popover-content'）。html（）;
$
$ b $（'ul'）。on（'DOMNodeInserted'，function（）{//列出插入ul $ b的新项目$ b $（event.target）.popover（popOverSettings）;
}）;
$（button [rel = popover]）。popover（popOverSettings）;
$（'。pop-Add'）。click（function（）{
$（'ul'）。append（< li class ='project-name'>< a&项目名称2< button class ='pop-function'rel ='popover'>< / button>< / a>< / li>）;
}）;
但不建议使用 DOMNodeInserted 针对性能问题以及支持的突变事件。这是已弃用以及。所以你最好的选择是保存设置并在使用新元素更新后绑定。
演示
另一个推荐的方法是使用 MutationObserver ，而不是根据MDN的MutationEvent，但在一些浏览器中再次支持是未知的，性能是一个问题。
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
//创建一个观察器实例
var observer = new MutationObserver（function（mutations）{
mutations.forEach（function（mutation）{
$（mutant.addedNodes）.popover （popOverSettings）;
}）;
}）;
//观察者的配置：
var config = {
属性：true，
childList：true，
characterData：true
};
//传入目标节点，以及观察者选项
observer.observe（$（'ul'）[0]，config）;
演示
I'm using Twitter Bootstrap's popover on the dynamic list. The list item has a button, when I click the button, it should show up popover. It works fine when I tested on non-dynamic.
this is my JavaScript for non-dynamic list
$("button[rel=popover]").popover({
placement : 'right',
container : 'body',
html : true,
//content:" <div style='color:red'>This is your div content</div>"
content: function() {
return $('#popover-content').html();
}
})
.click(function(e) {
e.preventDefault();
});
However, It doesn't work well on dynamic list. It can show up when I click the button "twice" and only show up one of list items I click fist time.
MY html:
<ul id="project-list" class="nav nav-list">
<li class='project-name'>
<a >project name 1
<button class="pop-function" rel="popover" ></button>
</a>
</li>
<li class='project-name'>
<a>project name 2
<button class="pop-function" rel="popover" ></button>
</a>
</li>
</ul>
<div id="popover-content" style="display:none">
<button class="pop-sync"></button>
<button class="pop-delete"></button>
</div>
My JavaScript for dynamic:
$(document).on("click", "#project-list li" , function(){
var username = $.cookie("username");
var projectName = $(this).text()
$("li.active").removeClass("active");
$(this).addClass("active");
console.log("username: " +username + " project name: "+projectName );
});
$(document).on("click", "button[rel=popover]", function(){
$(this).popover({
placement : 'right',
container : 'body',
html : true,
content: function() {
return $('#popover-content').html();
}
}).click(function(e){
e.preventDefault();
})
});
//for close other popover when one popover button click
$(document).on("click", "button[rel=popover]" , function(){
$("button[rel=popover]").not(this).popover('hide');
});
I have searched similar problems, but I still can't find the one to solve my problem. If anyone has some ideas, please let me know. Thanks your help.
Update
If your popover is going to have a selector that is consistent then you can make use of selector property of popover constructor.
var popOverSettings = {
placement: 'bottom',
container: 'body',
html: true,
selector: '[rel="popover"]', //Sepcify the selector here
content: function () {
return $('#popover-content').html();
}
}
$('body').popover(popOverSettings);
Other ways:
- (Standard Way) Bind the popover again to the new items being inserted. Save the popoversettings in an external variable.
- Use
Mutation Event/Mutation Observerto identify if a particular element has been inserted on to theulor an element.
Source
var popOverSettings = { //Save the setting for later use as well
placement: 'bottom',
container: 'body',
html: true,
//content:" <div style='color:red'>This is your div content</div>"
content: function () {
return $('#popover-content').html();
}
}
$('ul').on('DOMNodeInserted', function () { //listed for new items inserted onto ul
$(event.target).popover(popOverSettings);
});
$("button[rel=popover]").popover(popOverSettings);
$('.pop-Add').click(function () {
$('ul').append("<li class='project-name'> <a>project name 2 <button class='pop-function' rel='popover'></button> </a> </li>");
});
But it is not recommended to use DOMNodeInserted Mutation Event for performance issues as well as support. This has been deprecated as well. So your best bet would be to save the setting and bind after you update with new element.
Demo
Another recommended way is to use MutationObserver instead of MutationEvent according to MDN, but again support in some browsers are unknown and performance a concern.
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
// create an observer instance
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
$(mutation.addedNodes).popover(popOverSettings);
});
});
// configuration of the observer:
var config = {
attributes: true,
childList: true,
characterData: true
};
// pass in the target node, as well as the observer options
observer.observe($('ul')[0], config);
Demo
这篇关于如何绑定动态元素上的引导popover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
