我有以下代码可以成功地将弹出窗口添加到动态元素:
var selection = "http://www.google.com/images/srpr/logo3w.png";
var image = '<img src="' + selection + '" />';
var previewLink = '<a class="show-popover" href="#" rel="popover" >(Hover to Preview) </a>';
$('#headerBlock').append(previewLink);
$('body').popover({
selector: '.show-popover',
title: 'test',
content: image,
trigger: 'hover'
});
但是,我无法在悬停时让弹出窗口保持事件状态。下面是我的代码,但它不起作用:
$(".show-popover").popover({
trigger: "manual",
html: true,
animation: false
})
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
这是 JSFIDDLE:http://jsfiddle.net/KAvAZ/124/
有什么帮助吗?
最佳答案
这是我对这个问题的回答(我希望有一天它能对其他人有所帮助):http://jsfiddle.net/KAvAZ/127/
我需要做的是在应该显示弹出窗口的链接的 mouseenter
事件中调用 popover
方法。由于我需要覆盖动态元素(即在 DOM 加载后添加),我使用了 on
方法:
var selection = "http://www.google.com/images/srpr/logo3w.png";
var image = '<img src="' + selection + '" />';
var previewLink = '<a class="show-popover" href="#" rel="popover" >(Hover to Preview) </a>';
$('#headerBlock').append(previewLink);
$('body').on("mouseenter", '.show-popover', function() {
var _this = this;
$(this).popover({
html: true,
content: function() {
return "Content";
},
title: function() {
return "Title";
}
});
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
关于javascript - 如何在悬停时让弹出窗口保持事件状态[对于动态元素],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36684222/