1

このポップオーバーをトリガーした親要素がDOMから削除された場合、どのようにブートストラップポップオーバーを非表示にしますか?親要素が削除された場合、ブートストラップポップオーバーを非表示にする

ユーザーがページのボタンをクリックすると、一部のコンテンツがajax経由でdivに読み込まれます。次に別のボタンをクリックすると、別のAjaxコールがこの同じdiv内のコンテンツを置き換えます。

このdiv要素にロードされたコンテンツは以下のようにブートストラップポップオーバーをトリガとして動作する要素が含まれ、この1:

$(document).ajaxSuccess(function(){ 
      var init = function() { 
       $('[data-toggle="popover"]').each(function(index) { 
        initPopover(this); //This is where the popover gets initialized 
       }); 
      } 
      window.setTimeout(init,100); // set timeout to prevent function from being executed before content is replaced 
     }); 

問題の後:popoversが成功するたびにAJAX呼び出しの後に初期化されます

<a class="infolink" data-toggle="popover" data-title="some title" data-placement="bottom" data-trigger="hover click" ></a> 

ajax呼び出しは、ポップアップが表示された場合、親要素が削除された後でも表示されたままになります。これは、Googleの結果によると、ポップオーバーやダイアログの珍しい問題ではありませんが、私が今までに遭遇した解決策は、私にとってとても清潔ではありませんでした。

2つの解決策があります。
ajaxが成功するとすべてのポップオーバーを非表示にします。これはオプションではありません。なぜなら、私のポップオーバーのコンテンツは、一旦開かれると、ajaxを介して動的にロードされるからです。

すべてのトリガー要素を配列に格納します。 Ajaxの成功イベントが発生したら、その配列をループし、その要素がまだ存在するかどうかを確認します。

//Pseudocode 
var popoverTriggers = []; 
$('[data-toggle="popover"]').each(function(index) { 
    popoverTriggers.push(this); 
} 

私には非常にきれいではありません。

誰かがこれを行うより良い方法を知っていますか?

+0

[外部をクリックしてTwitter Bootstrapのポップオーバーを解除するにはどうすればいいですか?](http://stackoverflow.com/questions/11703093/how-to-dismiss-a-twitter-bootstrap-popover-by-clicking-外側) – sparkyShorts

答えて

2

私はポップオーバーの除去をトリガすべきイベントに

$('.popover').remove(); 

を追加しました。これは私のためにうまくいった。

関連する問題