ブートストラップがセットポップオーバーは、コンテンツ

Question

私は動的にJavascriptを使用して、ブートストラップポップオーバーの内容を変更する方法を見つけるためにしようとしている、しかし、この方法は、私がこれまで働いていないに遭遇しています

<!--object with the popover--> 
<input id="popoverlist" type="text" name="poplist" placeholder="Enter data" data-html="true" data-content="" rel="popover" data-placement="bottom" data-original-title="pop list" > 

$('#popoverlist').popover({ 
       offset: 10, 
       trigger: 'manual', 
       animate: false, 
       html: true, 
       placement: 'left', 
       template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 

      }).click(function(e) { 
       e.preventDefault() ; 
      }).mouseenter(function(e) { 
       $(this).popover('show'); 
      }); 

方法I

$('#popoverlist').data('bs.popover').html("<p>New content</p>"); 
//and using the inner HTML 
document.getElementsByClassName("popover-content")[0].innerHTML = '<p>New content</p>'; 

ただし、これらのメソッドはいずれもhtmlデータの内容を変更しません。

Answer 1

2つ目の考え方はうまくいきますが、の後にを呼び出す必要があります。popover-contentが作成されています。

ポップオーバーは、最初に表示されるまで作成されず、showを呼び出すたびに再作成されます。したがって、$(this).popover('show');の後に内容を変更する必要があります。

私はこの動作を示すスニペット含めました：あなたは正しかった

$('#popoverlist').popover({ 
 
    offset: 10, 
 
    trigger: 'manual', 
 
    animate: false, 
 
    html: true, 
 
    placement: 'bottom', 
 
    template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
 

 
}).click(function(e) { 
 
    e.preventDefault() ; 
 
}).mouseenter(function(e) { 
 
    $(this).popover('show'); 
 
    
 
    // dynamically change content after show 
 
    document.getElementsByClassName("popover-content")[0].innerHTML = '<p>New content</p>'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<input id="popoverlist" type="text" name="poplist" placeholder="Enter data" data-html="true" data-content="" rel="popover" data-placement="bottom" data-original-title="pop list" >