我正在使用 jQuery 工具提示来显示动态加载的内容(下面的 javascript)。在某些情况下,当鼠标离开元素时,工具提示不会消失。我的理论是动态内容的加载会引入轻微的延迟,因此鼠标会在工具提示功能完成之前离开元素,因此它不会消耗 mouseleave 事件。有什么办法可以解决吗?
element.tooltip(
{
items: "table.orderlist label",
open: function (event, ui)
{
ui.tooltip.css("max-width", "600px");
ui.tooltip.css("max-height", "300px");
ui.tooltip.css("overflow", "hidden");
},
content: function (callback)
{
//Get the contents as the tooltip is popping up
MyAjaxCall(iID,
function (result)
{
try
{
//success
callback(result) //returns the result
}
catch (e)
{
DisplayError(e);
}
},
function (result)
{
//Error
DisplayError(result);
});
}
});
最佳答案
你的content函数应该稍微复杂一点,可能的解决方法是:
content: function (callback)
{
var $this = $(this), isMouseOn = true;
// check if tooltip ajax-request is in progress
// really needed for slow scripts only
if($this.data('tt-busy')) return;
// check if el is hovered (in jquery <= 1.8 you can simly use .is(':hover')
$this
.data('tt-busy', true)
.on('mouseenter.xxx', function() { isMouseOn = true; })
.on('mouseleave.xxx', function() { isMouseOn = false; });
//
$.get('slow.script', function(d) {
if(isMouseOn) callback(d);
}).always(function() {
// even if result fails set loading var to false and unbind hover events
$this
.data('tt-busy', false)
.off('.xxx');
});
}
关于javascript - 在动态加载内容期间取消 jquery 工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19188616/