Javascript 在动态加载内容期间取消jquery工具提示
我使用jQuery工具提示来显示动态加载的内容(下面是javascript)。在某些情况下,当鼠标离开图元时,工具提示不会消失。我的理论是,动态内容的加载会引入一个轻微的延迟,因此鼠标会在工具提示功能完成之前离开元素,因此它不会使用mouseleave事件。有办法解决这个问题吗Javascript 在动态加载内容期间取消jquery工具提示,javascript,jquery,jquery-tooltip,Javascript,Jquery,Jquery Tooltip,我使用jQuery工具提示来显示动态加载的内容(下面是javascript)。在某些情况下,当鼠标离开图元时,工具提示不会消失。我的理论是,动态内容的加载会引入一个轻微的延迟,因此鼠标会在工具提示功能完成之前离开元素,因此它不会使用mouseleave事件。有办法解决这个问题吗 element.tooltip( { items: "table.orderlist label", open: function (event, ui)
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: 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');
});
}
content:函数(回调)
{
var$this=$(this),isMouseOn=true;
//检查工具提示ajax请求是否正在进行
//真的只需要慢脚本吗
if($this.data('tt-busy'))返回;
//检查el是否悬停(在jquery中,覆盖加载程序在完全加载时消失?谢谢!mouseenter.xxx和mouseleave.xxx是做什么的?我不熟悉.xxx