20

ここでstackoverflowに投稿するのは初めてなので、ここで何かを台無しにした場合は事前にお詫び申し上げます。

TwitterBootstrapのポップオーバーを使用しています。私のポップオーバーは、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'});
});

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

アップデート：

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

4

3 に答える 3

17

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

アップデート

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'});
  });
于 2012-08-14T06:51:15.547 に答える
2

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

success:function(){
  $("[rel=popover]").popover({placement:'left'});
}
于 2012-08-14T06:57:16.387 に答える
0

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

$(function ()  
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});
于 2013-12-12T13:11:12.223 に答える