bootstrap彈出窗口內容更改

Question

我試圖根據別處某個div的內容更改bootstrap彈出窗口的數據內容。

在HTML，我酥料餅觸發看起來是這樣的：

 <div id="box1" 
     class="text-success" data-container="body" 
     data-html="true" 
     data-trigger="click" 
     data-toggle="popover" data-placement="bottom" 
     data-content="Get more info at <a href='http://example.com'>this link</a>."<br> 
     <div id="box1Label" title="Click for more">Another Label</div> 
     </div> 

我把這樣的popovers（JQuery的）：

var pop = $('[data-toggle="popover"]'); 
    $(pop).popover(); 
    $(pop).on('click', function (e) { 
    $(pop).not(this).popover('hide'); 
    if ($('#panel2Head').html()== 'XXX') { 
    alert('okay yes panel2Head html is XXX'); 
    popover.options.content = "Test Changed Content"; 
    } 
}); 

警報確認它的閱讀＃panel2Head和＃ panel2Head包含「XXX」，但下一行理論上應該將彈出內容從「獲取更多信息...」更改爲「測試更改的內容」，而不是。

這是我讀過的東西之一，例如here。

這個彈出窗口完美地工作，否則他們只是總是將這些內容硬連線到HTML中的數據內容中。

我試過'pop.options.content =「測試更改內容」;'也

如果有人有建議非常感謝。

編輯：

這似乎是時機的問題，那就是，你有它的加載後搶酥料餅的內容。我發現在second answer here的解決方案，經過一些修改，我們用這裏面的工作上來：

var pop = $('[data-toggle="popover"]'); 
$(pop).popover(); 
$(pop).on('click', function (e) { 
    $(pop).not(this).popover('hide'); 

}); 
$(pop).on('shown.bs.popover', function(e) { 
    if ($('#panel2Head').html()== 'XXX') { 
     var id = $(e.target).attr('aria-describedby'); 
     $('#'+id).html('<p><b>My New Popover Content</b></p>');   
    } 
}); 

Answer 1

這工作：

$(pop).on('shown.bs.popover', function(e) { 
if ($('#panel2Head').html()== 'XXX') { 
    var id = $(e.target).attr('aria-describedby'); 
    $('#'+id).html('<p><b>My New Popover Content</b></p>');   
    } 
}); 

Answer 2

如果你想改變一些數據，你可以看到https://stackoverflow.com/a/44475697/1622945（帶模板選項）。

如果要加載酥料餅的html頁面，你可以試試這個：

var hoverTimeout; 

$('[data-toggle="popover"]').hover(function() { 
    var _this = $(this); 

    hoverTimeout = setTimeout(function() { 
     $.ajax({ 
      url: url, 
      type: 'GET', 
      dataType: 'html', 
      success: function(dialog) { 
       if($(".popover:hover").length != 0) { 
        $(".profile").popover("destroy"); 
       } 
       _this.popover({ 
        container: 'body', 
        placement: 'auto', 
        trigger: 'manual', 
        html: true, 
        content: dialog 
       }).on("mouseout", function() { 
        setTimeout(function() { 
         if(!$(".popover:hover").length) { 
          $(".popover").popover("destroy"); 
         } 
        }, 300); 
       }); 
       _this.popover('show'); 
       setTimeout(function() { 
        $('.popover-content').on("mouseleave", function() { 
         $(".popover").popover("destroy"); 
        }); 
       }, 300); 
      }, 
     }); 
    }, 300); 
}, function() { 
    clearTimeout(hoverTimeout); 
});