在动态加载内容期间取消jquery工具提示 [英] cancel jquery tooltip during dynamic loading of content

问题描述

我正在使用jQuery工具提示来显示动态加载的内容（下面的javascript）。在某些情况下，当鼠标远离元素时，工具提示不会消失。我的理论是，动态内容的加载会引入一些延迟，因此鼠标在工具提示功能完成之前就会远离元素，因此它不会消耗mouseleave事件。有什么方法可以解决这个问题吗？

I'm using the jQuery tooltip to show content that is dynamically loaded (javascript below). In some cases when the mouse moves away from the element the tooltip doesn't go away. My theory is that the loading of the dynamic content introduces a slight delay so the mouse moves away from the element just before the tooltip function completes and so it doesn't consume the mouseleave event. Any way to resolve this?

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

推荐答案

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

Your content function should be a bit more complicated, the possible solution is:

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

这篇关于在动态加载内容期间取消jquery工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！