1. ホーム
  2. jquery

[解決済み] BootstrapのポップオーバーのコンテンツをAJAXで読み込む。これは可能ですか?

2023-03-17 02:43:34

質問

私が試したことのうち、適切なものはここにあります。

<a href="#" data-content="<div id='my_popover'></div>"> Click here </a>

$(".button").popover({html: true})

$(".button").click(function(){
    $(this).popover('show');
    $("#my_popover").load('my_stuff')
})

クリックすると、リクエストは行われますが、ポップオーバーには入力されません。ポップオーバーのHTMLがDOMに追加されるのさえ見えませんが、これはfirebugのせいかもしれません。

誰かこれを試したことがありますか?

どのように解決するのですか?

私のブログの記事で解決策を紹介しています。 https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4

まず、ポップオーバーを追加したい要素に data-poload 属性を追加します。 を追加します。この属性の内容は次のとおりです。 を指定します(絶対または相対)。

<a href="#" title="blabla" data-poload="/test.php">blabla</a>

<ブロッククオート

そして、JavaScriptでは、できれば$(document).ready()で。

$('*[data-poload]').hover(function() {
    var e=$(this);
    e.off('hover');
    $.get(e.data('poload'),function(d) {
        e.popover({content: d}).popover('show');
    });
});

<ブロッククオート

off('hover') は、データの複数回読み込みを防止し popover() は は新しいホバーイベントをバインドします。もし、ホバーイベントごとにデータを更新したい場合は でデータを更新したい場合は、offを削除する必要があります。

動作中の JSFiddle をご覧ください。