如何在动态元素上绑定引导弹出窗口 [英] How to bind bootstrap popover on dynamic elements

问题描述

我在动态列表中使用 Twitter Bootstrap 的弹出框.列表项有一个按钮，当我单击该按钮时，它应该显示弹出窗口.当我在非动态上测试时它工作正常.

这是我的非动态列表的 JavaScript

$("button[rel=popover]").popover({位置:'正确'，容器:'身体'，html : 真的,//content:" <div style='color:red'>这是你的div内容</div>"内容:函数(){返回 $('#popover-content').html();}}).click(功能(e){e.preventDefault();});

但是，它在动态列表上效果不佳.它可以在我单击两次"按钮时显示，并且只显示我第一次单击的列表项之一.

我的 html:

 
<a >项目名称 1<button class="pop-function" rel="popover" ></button></a>
<a>项目名称2<button class="pop-function" rel="popover" ></button></a>
<div id="popover-content" style="display:none"><button class="pop-sync"></button><button class="pop-delete"></button>

我的动态 JavaScript:

$(document).on("click", "#project-list li" , function(){var username = $.cookie("用户名");var projectName = $(this).text()$("li.active").removeClass("active");$(this).addClass("active");console.log("用户名:" +用户名 + " 项目名:"+projectName );});$(document).on("click", "button[rel=popover]", function(){$(this).popover({位置:'正确'，容器:'身体'，html : 真的,内容:函数(){返回 $('#popover-content').html();}}).点击(功能(e){e.preventDefault();})});//当一个弹窗按钮点击时关闭其他弹窗$(document).on("click", "button[rel=popover]" , function(){$("button[rel=popover]").not(this).popover('hide');});

我已经搜索过类似的问题，但仍然找不到解决我问题的方法.如果有人有一些想法，请告诉我.谢谢你的帮助.

解决方案

更新

如果你的 popover 将有一个一致的选择器，那么你可以使用 popover 构造函数的 selector 属性.

var popOverSettings = {位置:'底部'，容器:'身体'，html:对，selector: '[rel="popover"]',//这里指定选择器内容:函数(){返回 $('#popover-content').html();}}$('body').popover(popOverSettings);

演示

其他方式:

1. (Standard Way) 再次将弹出框绑定到要插入的新项目.将 popoversettings 保存在外部变量中.
2. 使用 Mutation Event/Mutation Observer 来识别特定元素是否已插入到 ul 或元素上.

来源

var popOverSettings = {//保存设置以备后用位置:'底部'，容器:'身体'，html:对，//内容:"<div style='color:red'>这是您的 div 内容</div>>内容:函数(){返回 $('#popover-content').html();}}$('ul').on('DOMNodeInserted', function () {//列出插入到 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'></按钮></a></li>");});

但是不推荐使用DOMNodeInserted 性能问题以及支持的突变事件.这是 已弃用 .因此，最好的办法是在使用新元素更新后保存设置并绑定.

演示

另一种推荐的方法是使用 MutationObserver 而不是 MutationEvent根据 MDN，但在某些浏览器中的支持仍然未知且性能令人担忧.

MutationObserver = window.MutationObserver ||window.WebKitMutationObserver;//创建一个观察者实例var 观察者 = 新的 MutationObserver(函数(突变){突变.forEach(函数(突变){$(mutation. addedNodes).popover(popOverSettings);});});//观察者的配置:变量配置 = {属性:真实，childList: 真,字符数据:真};//传入目标节点，以及观察者选项观察者.观察($('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);

Demo

Other ways:

1. (Standard Way) Bind the popover again to the new items being inserted. Save the popoversettings in an external variable.
2. Use Mutation Event/Mutation Observer to identify if a particular element has been inserted on to the ul or 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

这篇关于如何在动态元素上绑定引导弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！