web-dev-qa-db-ja.com

Bootstrap popover destroy＆recreateは2回おきにのみ機能します

特定のBootstrap popoverをプログラムで破棄して再作成したいので、次のようにします。

$('#popoverspan').popover('destroy');
$('#popoverspan').popover({placement : 'bottom', trigger : 'hover', content : 'Here it is!'});

そして、それは毎秒のみ機能します。ポップオーバーを破壊するのにかかる時間の問題だと思いましたが、2行の間に遅延を追加しても役に立ちません。 JSFiddleで問題を再現しました： http://jsfiddle.net/Lfp9ssd0/10/

なんでそんなの？それが機能することが示唆されています、例えば。 in Twitter Bootstrap ajaxを介して動的に生成されたコンテンツを含むポップオーバー および Bootstrap Popover Reinitialization（To refresh Content）

破棄をスキップすると問題なく動作しますが、既存の要素を破棄せずに要素に別のポップオーバーを作成するとどうなるかわかりません。それは再初期化されていますか、それとも古いポップオーバーへのアクセスを失って新しいポップオーバーを作成しますか？

javascripttwitter-bootstrappopover
19
Polakko

自分で解決しました。どうやら.popover('destroy')は非同期であり、前のポップオーバーが破棄されている間、別のポップオーバーの即時作成は失敗します。 alertを使用して遅延を追加しようとしましたが、何らかの理由で失敗しました。新しいポップオーバーを作成する前にsetTimeout()を使用することは、最も洗練された解決策ではありませんが、実用的な解決策です。

$('#popoverspan').popover('destroy');
setTimeout(function () {
    $('#popoverspan').popover({
        placement : 'bottom', 
        trigger : 'hover', 
        content : 'Here is new popover!'
    });
}, 200);

200ミリ秒で十分なようですが、それ以外の場合は微調整が必​​要になる場合があります。

25
Polakko

ここで説明したのと同じ問題が発生しました。徹底的な調査の結果、最初にポップオーバーを破壊することなく、ポップオーバーの内容を変更する方法を見つけました。 contentオプションを指定せずにポップオーバーを初期化するだけです。

$('#popoverspan').popover({
    placement : 'bottom',
    trigger : 'hover', 
});

上記のポップオーバーの初期化ではコンテンツが指定されていないことに注意してください。ポップオーバーはまだ表示できません。コンテンツはありません。次に、ポップオーバーに表示されるさまざまなタイプのテキストにつながる条件を指定します。

if (condition_1) {
    $("#popoverspan").data('bs.popover').options.content = "Something important here!"
}
else {
    $("#popoverspan").data('bs.popover').options.content = "This is also important!"
}

これで、ポップオーバーを表示する準備が整いました。

$("#popoverspan").popover('show');

これはBootstrap 3.0の時点で私にとってはうまくいきました。もちろん、準備ができたら、ページで適切なイベントが発生したときに、いつものようにポップオーバーを破棄または非表示にすることができます。

pdate：ポップオーバーがalready表示された後、ポップオーバーのテキストを変更する必要がある場合は、基本的に同じものを使用できます技術。 1）ポップオーバーが接続されているDOMを取得してから、コンテンツを変更し、2）ポップオーバーを再度表示します。以下の例：

$("#popoverspan").data('bs.popover').options.content = "some new text";
$("#popoverspan").popover('show');
10
Deniz

設定'animation': false私のためにそれを修正しました

2
Michael Kardzhilov

SetTimeoutアプローチを試しましたが、何らかの理由で機能しませんでした。次に、popoverオブジェクトを詳しく調べましたが、実際には、正常に機能するdestroy()メソッドがあります。例えば。：

var popover = $.data($('#popoverspan'), "bs.popover");
popover.destroy();
0
Márcio Gurka

@Denizの答えは素晴らしいですが、ポップオーバーが表示された後にタイトル/コンテンツを変更したい場合で、古いBootstrapバージョン（私のものは3.3.1））の場合は、代わりに$('.your_popover_target').data('popover').options.content = "new text"を使用する必要があります.data('bs.popover')の後に$('.your_popover_target').popover('show')が続きます。

0
sandre89