ブートストラップポップオーバー変更htmlコンテンツ

Question

ブートストラップポップオーバー内のポップオーバーコンテンツを頻繁に変更する必要があります。私がコンテンツでポップオーバーを作成するには、次回はポップオーバーを破壊して再び作成しました。しかし、期待どおりに動作しません。この問題は、偶数の時間にしか働かないという問題です。 1回目は2回目に働き、3回目は働かないなどです。

<div id="today_not_to_doctr"> 
    note 
</div> 
<button id="test"> 
    haii 
</button> 

Javascriptが

var i = 0; 
var content = "<div>haiii</div>" + i; 

$('#today_not_to_doctr').popover({ 
    title: "<h5>Note to Doctor</h5>", 
    content: content, 
    html: true, 
    placement: "bottom", 
    viewport: { 
    selector: 'body', 
    padding: 20 
    } 
}); 

$('#test').on('click', function() { 
    i++; 
    content = "<div>haiii</div>" + i; 
    $('#today_not_to_doctr').popover('destroy'); 
    $('#today_not_to_doctr').popover({ 
    title: "<h5>Note to Doctor</h5>", 
    content: content, 
    html: true, 
    placement: "bottom", 
    viewport: { 
     selector: 'body', 
     padding: 20 
    } 
    }); 
}); 

私は https://jsfiddle.net/sulusfiddle/b8omeph2/

Answer 1

これを試してみてくださいフィドルで問題を複製しているHTML

として

私は私のシナリオを作成しました：

var i = 0; 

var popover = $('#today_not_to_doctr').popover({ 
    title: "<h5>Note to Doctor</h5>", 
    trigger: 'manual', 
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>', 
    content: function() { 
    return "<div>haiii</div>" + i; 
    }, 
    html: true, 
    placement: "bottom", 
    viewport: { 
    selector: 'body', 
    padding: 20 
    } 
}); 

$('#test').on('click', function() { 
    i++; 
    popover.popover("show"); 
}); 

var i = 0; 
 

 
var popover = $('#today_not_to_doctr').popover({ 
 
    title: "<h5>Note to Doctor</h5>", 
 
    trigger: 'manual', 
 
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>', 
 
    content: function() { 
 
    return "<div>haiii</div>" + i; 
 
    }, 
 
    html: true, 
 
    placement: "bottom", 
 
    viewport: { 
 
    selector: 'body', 
 
    padding: 20 
 
    } 
 
}); 
 

 
$('#test').on('click', function() { 
 
    i++; 
 
    popover.popover("show"); 
 
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 
<div id="today_not_to_doctr"> 
 
    note 
 
</div> 
 
<button id="test"> 
 
    haii 
 
</button>