Question

我尝试为bootstrap popover使用多个模板，我遵循的方案是点击加载页面上的按钮，第一个模板将显示一个链接以更改class f popover按钮。因此，当我再次点击同一个按钮时，它应显示第二个模板！但似乎popover保存类的按钮并绑定弹出窗口。我试图破坏它并在新类上再次绑定popover但不起作用。在小提琴here上找到例子。

我通过使用相同的按钮替换按钮html但使用新类来解决问题。它工作。看到这里的工作实例我做了。 link 但我试图找到另一个或更好的解决方案。

var popoverTemplate = ['<div class="first-pop popover" role="tooltip">',
            '<div class="arrow"></div>',
            '<button type="button" class="close" onclick="$(\'.popover\').popover(\'hide\')" aria-hidden="true">×</button>',
            '<h3 class="popover-title">test</h3>',
            '<div class="popover-content">ONE',
            '</div>',
            '</div>'].join('');

        var firstTemplate = ['<div class="firstTmp-pop popover" role="tooltip">',
            '<div class="arrow"></div>',
            '<button type="button" class="close" onclick="$(\'.popover\').popover(\'hide\')" aria-hidden="true">×</button>',
            '<div class="popover-content">',
            '</div>',
            '</div>'].join('');

        var firstTmpContent = ['<div class="firstTmpContent-post clearfix"><a class="changetemp" href="#">Change template</a>',
            '</div>',].join('');

        var content = ['<div>Content</div>',].join('');

var secondOptions = {
            trigger: "click"
            , html: true
            , template: popoverTemplate 
            , content: content

        };

var firstOptions = {
            trigger: "click"
            , html: true
            , template: firstTemplate
            , content: firstTmpContent

        };

 $('.box').popover(firstOptions);
 $(document).on('click','.box2',function(e){
    $(this).popover(secondOptions);
 });

$(document).on('click','.changetemp',function(e){
    e.preventDefault();
    $('[rel="popover"]').popover('hide'); 
    $('.box').removeClass('box').addClass('box2');
});

Answer 1

var obj = '';
$('.box').click(function(){
    obj = $(this).clone();
});
$(document).on('click','.changetemp',function(e){
    e.preventDefault();
    $('[rel="popover"]').popover('hide'); 
    obj.addClass('box2').removeClass('box');
    $('.box').replaceWith(obj);
    $('.box2').popover(secondOptions);
});

在同一个弹出按钮上使用多个模板

1 个答案: