在同一個彈出式按鈕上使用多個模板

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