在动态加载内容期间取消jquery工具提示

我正在使用jQuery工具提示来显示动态加载的内容（下面的javascript）。 在某些情况下，当鼠标远离元素时，工具提示不会消失。 我的理论是，动态内容的加载会引入一些延迟，因此鼠标在工具提示function完成之前就会远离元素，因此它不会消耗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); }); } }); 

Answer 1

您的内容function应该有点复杂，可能的解决方案是：

 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'); }); }