5

ウェブサイトの再設計でTwitterBoostrapを使用していますが、jQueryのヘルプが必要です。ブートストラップにパッケージ化されている「Popover」アドオンを使用しており、それを#divタグ（具体的には#onlinedata）に入れており、jqueryを使用して10秒ごとにdivをリロードしています。これは正常に機能しますが、divが更新されたときにポップオーバーをアクティブにするリンクにカーソルを合わせると、ポップオーバーがスタックします。

私はこのコードを更新に使用しています：

setInterval(function(){
        $("#onlinedata").load("http://website.com #onlinedata");
}, 10000);

そして、必要に応じて、ポップオーバーをアクティブにするコード：

$(function () {
        $('a[rel=popover]').popover({
            placement:'right',
            title:'Title',
            content: $('#div-that-contains-data').html()
        });
});

divがリロードされたときにポップオーバーが開いたままになるのを防ぐ方法はありますか？

どんな助けでも大歓迎です。

関連するHTML

私は複数のポップオーバーを持っているので、これ$idは各ポップオーバーに固有のキーです。

がホバーされるまで非表示になっているポップオーバー部分popover_controller：

<div id="controller_popup_$id" style="display:none;">
   <div style="font-size:11px">
       //data_fetched_from_database
   </div>
</div>

ポップオーバーをトリガーするリンク

<li><a href="#" rel="popover_controller_$id">Link Title</a></li>

そして最後に、私が使用している現在のjavascript（データベースレコードをループするため、各レコードは次のjavascriptを取得します）：

$(function () {
    $('a[rel=popover_controller_$id]').popover({
          placement:'right',
          title:'Title (this is fetched from the database for each popover)',
          content: $('#controller_popup_$id).html()
    });
});
$(document).ready(function() {
    // refreshing code
    setInterval(function() {
        $('#controller_popup_$id').hide(); // close any open popovers
        // fetch new html
        $('#onlinedata').load('http://website-link.com #onlinedata', function() {
            // after load, set up new popovers
            $('a[rel=popover_controller_$id]').popover({
                placement:'right',
                title:'Title (this is fetched from the database for each popover)',
                content: $('#controller_popup_$id').html()
            });
        });
    }, 10000); // 10 second wait
});

**新しいコードウィッチセミワークス**

私は半ば機能する次のコードを使用しています。私が抱えている唯一の問題は、＃onlinedata divをリロードした後、ポップオーバーリンクを乗算することです。

$(document).ready(function() {
        $('a[rel=popover_controller_$id]').popover({
            placement:'right',
            title:'Title',
            content: $('#controller_popup_$id').html()
        });
        // refreshing code
        setInterval(function() {
            // fetch new html
            $('a[rel=popover_controller_$id]').load('http://websiteurl.com/ #onlinedata', function() {

                $('a[rel=popover_controller_$id]').popover('destroy'); // remove old popovers
                // after load, set up new popovers
                $('a[rel=popover_controller_$id]').popover({
                    placement:'right',
                    title:'Title',
                    content: $('#controller_popup_$id').html()
                });

            });
        }, 10000); // 10 second wait
});
4

1 に答える 1

0

この回答のように、編集された新しい DOM 要素にプラグインを再適用する必要があると思いますload。これは事実上popover、呼び出しの後にコードのコピーを追加することを意味しloadます。古いポップオーバーがぶら下がっている場合は、それらを非表示にする必要がある場合があります。これにより、次のことがわかります。

$(document).ready(function() {
    // refreshing code
    setInterval(function() {
        $('a[rel=popover]').popover('destroy'); // remove old popovers
        // fetch new html
        $('#onlinedata').load('/onlinedata.html #onlinedata', function() {
            // after load, set up new popovers
            $('a[rel=popover]').popover({
                placement:'right',
                content: $('#div-that-contains-data').html()
            });
        });
    }, 10000); // 10 second wait
});
于 2012-08-26T01:38:31.383 に答える