在动态加载内容时取消jQuery工具提示

Question

我正在使用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); 
        }); 
      } 
     }); 

Answer 1

你的内容的功能应该是一个比较复杂一点，可能的解决方案是：

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