web-dev-qa-db-ja.com

Twitter Bootstrap動的に生成されたコンテンツでポップオーバーが機能しない

ここにstackoverflowに投稿するのは初めてなので、ここで何かを台無しにした場合は事前に謝罪してください。

Twitter Bootstrapのポップオーバーを使用しています。私のポップオーバーは、HTMLドキュメントに手動で入力する要素に対しては機能しているようですが、JavaScript/Ajaxを介して動的に生成する要素に対しては機能しません。

たとえば、これを自分のHTMLドキュメントに直接手動で追加すると、ポップオーバーは機能するようです。

<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>

しかし、本当に必要なのは、動的に生成された要素にポップオーバーを持たせることです。 XMLHttpRequestを使用してPHPファイルにリクエストを送信し、responseTextを取得して表示します。このコード行を前述のPHP =ファイル：

 echo "<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>";

...確かに、「ポップオーバーのホバー」という単語が表示されますが、ポップオーバー自体は機能しません。

これはしばらくの間私を狂わせてきました、そして誰かが私を助けてくれるなら信じられないでしょう！以下のBootstrapのポップオーバーを有効にするために使用しているJQuery関数も追加しました。

$(function (){
$("[rel=popover]").popover({placement:'left'});
});

私は同様の問題を徹底的に検索しましたが、私が見つけた最高のものは このリンク でした。しかし、そのリンクにも解決策がないようです。よろしくお願いします！

UPDATE：

修繕！助けてくれた皆さんに感謝します。私の問題は、要素がドキュメントオブジェクトモデルに追加される前に関数が呼び出されていたことでした。考えられる修正は複数あります。私は、ポップオーバー関数をAjax関数のENDにシフトすることでソリューションをテストしましたが、うまくいきました。

javascriptjqueryajaxtwitter-bootstrappopover
20
ryzh

要素がDOMにある後で$("[rel=popover]").popover({placement:'left'});を呼び出す必要があります。

[〜＃〜]更新[〜＃〜]

JQueryを使用している場合

$(element_selector)
  // load results into HTML of element_selector
  .load('your/php/file')
  // when done, initialize popovers
  .done(function(){
    $("[rel=popover]").popover({placement:'left'});
  });

[〜＃〜]または[〜＃〜] jQuery ajaxリクエストのすべてをキャッチ

$.ajaxComplete(function(){
    $("[rel=popover]").popover({placement:'left'});
  });
17
nickaknudson

Ajaxの成功関数では、ポップオーバーを呼び出す必要があります。このようなもの

success:function(){
  $("[rel=popover]").popover({placement:'left'});
}
2
Nick

この関数は、セレクターで適切に機能します。ここで、「rel = popover」を検索する必要があるページ上の場所を指定する必要があります*

$(function ()  
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});
0
Hassan Ali Shahzad