javascript - 在动态加载内容期间取消 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函数应该稍微复杂一点，可能的解决方法是:

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