5

我正在使用 Twitter Boostrap 进行网站重新设计，我需要一些 jQuery 帮助。我正在使用与 bootstrap 一起打包的“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

像这个答案一样，我认为您需要将插件重新应用到已被load-ed 的新 DOM 元素。这实际上意味着在调用popover之后添加代码副本。load如果旧的popovers到处都是，你可能不得不把它们藏起来。这给了我们：

$(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 回答