AJAX 剑道工具提示比赛条件答案

【问题标题】：AJAX Kendo Tooltip Race ConditionAJAX 剑道工具提示比赛条件
【发布时间】：2015-09-29 19:23:42
【问题描述】：

我正在进行 AJAX 调用以通过 POST 请求检索一些数据。然后，我使用该数据来创建工具提示。代码如下：

j$("#selectorID").one('mouseover',
    function(e) {
        var ticketType = e.target.classList[2];
        var ticketID = j$(e.target).data("ticket-id");
        j$.post("/Some/Url/",
            { "ticketID":ticketID, "ticketType":ticketType },
            function(r) {
                var title = r["title"];
                var tooltip = j$(e.target).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
                if (j$(e.target).is(":hover")) { tooltip.show(); }    // Race condition
            }
        );
    }
);

我相信存在竞争条件，因为即使我的鼠标移开工具提示，它仍然会出现。然后我必须把我的观点放在元素上，然后再把它移开，让它消失。有什么办法可以解决这个问题？

我尝试了一些不同的方法，包括您在此处看到的if (j$(e.target).is(":hover")) 条件。但还是不行。

【问题讨论】：

我认为你需要在 show() 中定位一个 DOM 元素，比如 tooltip.show($("#target")); docs.telerik.com/KENDO-UI/api/javascript/ui/…
我也试过了。没有效果。问题不在于它没有显示。问题是它在不应该显示的时候显示。

标签： javascript jquery css ajax kendo-ui

【解决方案1】：

看到这个问题：Jquery condition check is(':hover') not working。

:hover 是一个 CSS 伪类，而不是可以与 .is() 一起使用的 jQuery 选择器。

试试这个：

var id = $(e.target).prop("id");                      
if ($("#" + id + ":hover").length > 0) { tooltip.show(); }

DEMO

【讨论】：

非常感谢您的回复！我试过你提到的，不幸的是我得到了unsupported pseudo: hover。还有其他方法吗？您是否认为我在if 中的条件评估不正确，这是导致工具提示何时显示不应该显示的原因？
工具提示并不总是显示不正确，只是随机显示。所以我不确定是不是这个条件。
@RichieEpiscopo，像这样检查鼠标退出怎么样：dojo.telerik.com/@ezanker/OVihi

【解决方案2】：

好的，经过几个小时的搜索，我终于找到了自己问题的答案。

我在 UI 上看到的问题 - 工具提示不会消失，有时同时显示 2 个工具提示 - 不是竞争条件的结果。

结果是当您在同一个网页中使用多个剑道工具提示实例时，您需要手动隐藏/显示它们以确保不会出现杂散的工具提示。

问题，解决方案的概述描述here。

具体来说，我通过添加以下内容解决了我的问题：

j$("#selectorID").hover(function() {}, 
        // Handler for when the pointer is leaving an element
        function(e) {
            if (j$(e.target).data("kendoTooltip") !== undefined) {
                j$(e.target).data("kendoTooltip").hide();
            }
        });

【讨论】：