我正在使用 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()
});
});
有没有办法避免 popover 在 div 重新加载时卡在打开状态?
非常感谢任何帮助。
关联的 HTML
$id
是每个弹出框的特定键,因为我有多个弹出框。
在 popover_controller
悬停之前隐藏的 popover 部分:
<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
});
最佳答案
赞this answer ,我认为您需要将插件重新应用到已被 load
编辑的新 DOM 元素。这实际上意味着在 load
调用之后添加 popover
代码的副本。如果旧的弹出窗口到处都是,您可能需要隐藏它们。这给了我们:
$(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
});
关于javascript - 推特 Bootstrap : Popover and Auto Refresh,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12126834/