Boostrapツールチップを動的に更新する

Question

私はブートストラップツールチップを使用しています。ツールチップのhtmlを有効にして、title属性のhtmlスパンを使用できるようにしました。

スパンの値を動的に更新する際に問題が発生しています。

参照のデモ：https://jsfiddle.net/DTcHh/38497/

あなたがアップデートツールチップ]ボタンをクリックすると、ツールチップがに変更する必要があります。何が悪かったのか10 x 20

？

のjQuery：$('.update').on('click', function(){ $('[data-toggle="tooltip"]').attr('title', '10 x 20'); });へ

$(function() { 
    $('[data-toggle="tooltip"]').tooltip({ 
     html: true 
    }); 

    $('body').on('click', '.update', function() { 
     $('.a').text(10); 
     $('.b').text(20); 
    }); 
    }); 

HTML

<a href="#" data-toggle="tooltip" title="<span class='a'>2</span> x <span class='b'>5</span>"> 
    Hover Me 
</a> 

<button class="update">Update Tooltip</button> 

Answer 1

.aおよび.bは、DOMの要素ではありません。あなたがツールチップにカーソルを置こうとしたときにのみ作成されます。

これを変更する代わりに、adata-original-titleを更新したテキストに変更してください。 EXのために

：

$('body').on('click', '.update', function() { 
     $("a").attr("data-original-title", "<span class='a'>10</span> x <span class='b'>20</span>"); 
}); 

Updated Fiddle

Answer 2

変更$('body').on('click',...。