2

Bootstrap ポップオーバーを動的に作成された要素で動作させるのに問題がありました (ただし、それは別の質問です)。

回避策として、これらのポップオーバー要素のコンテンツ自体は実際には動的ではないため、HTML の読み込み時に既に DOM にあるポップオーバーを含む一連の非表示要素を作成することにしました。次に、JQuery の clone() を使用してそれらを複製し、必要な場所に配置することを計画しました。

問題は、新しい複製されたポップオーバーが起動している間、ポップオーバーが間違った位置にあることです。

HTMLはこんな感じ

<div style="display: none">
    <span id="anid" class="popoverbottom label label-info" data-title="Title" data-content="Content">TAG</span>
</div>

次に、次のようなコードを使用して popoverbottom クラスに popover イベントを登録します。

$(".popoverbottom").popover( {placement : 'bottom',  trigger: 'hover', delay: { show: 500, hide: 100 }} );

次に、次のような JQuery コードを使用して、ポップオーバーを含む要素を複製します。

e = $('#anid').clone(true);
e.attr('id','anewid');

次に、新しい要素を動的に append() すると、問題なく表示されます。その上にカーソルを合わせると、ポップオーバーが発生しますが、ブラウザー ウィンドウの左上隅に表示されます。左側が半分切り取られています。

ポップオーバー要素を含む <div> を表示する (つまり、display:none を削除する) と、新しい複製された要素ではなく、動的に作成されていない元の DOM 要素の上にポップオーバーが表示されます。

これは明らかに、ポップオーバーが登録されたときに、ポップオーバーが元の要素に結び付けられたためです。JQuery の .clone(true) は要素と関連するイベントをコピーしているように見えますが、元のポップオーバーの位置は更新されません。

クローンが作成され、ポップオーバーを新しい要素にアタッチする必要があることをポップオーバーに伝える方法はありますか?

または、動的に作成されたポップオーバーをこの jsFiddle スニペットで動作させようとしたほうがよいでしょうか。

上記のように、私はこの動的なアプローチを機能させようとしましたが、複数のポップオーバーが画面に残り、マウスが離れたときに非表示にならないという問題がありましたが、それは別の質問です.

アドバイスをいただければ幸いです。

4

1 に答える 1

5

問題は、複製されたすべてのポップオーバー ノードを DOM に追加する前に、Bootstrap がポップオーバーを作成することだと思います。新しく追加されたポップオーバーを登録する必要があります。複製されたノードをすべて追加するまで、 $(".popoverbottom").popover() を呼び出さないでください。$.clone(true) はイベントをコピーしますが、関数は添付しません。popover() は関数であり、イベントではありません。

于 2012-09-15T08:11:07.253 に答える