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

Question

我想要为用户使用多个模板bootstrap popover，我所遵循的场景是点击加载页面上的按钮，第一个模板将显示一个链接来更改类f 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); 
});