0

当我在锚标记上执行 mouseenter 事件时，工具提示会显示，而 mouseleave 工具提示会隐藏。这很好用。

但是，当我从多个锚标记快速移动鼠标（导致多个 ajax 请求）时，即使鼠标不在锚标记上，最后一个工具提示也不会隐藏。（基本上是鼠标最后输入的锚标记的工具提示完成ajax请求）

我所做的描述：

我必须在 mouseenter 事件的锚标记上显示工具提示。
因此，为了在工具提示中显示与锚标记相关的详细信息（锚标记是表的 id 列表），我在 div 中添加了一个 id(tooltipWindow)

<div id='tooltipWindow'> </div>

因此，在锚标记上的 mouseenter 上，我发送了一个 ajax 请求，如下所示：

$(document).ready(function(){
  $(td a).live('mouseenter', function(e){
  $.ajax({
    url: controller/action,
    data: $(this).text(),
    dataType: script,
    success: function(){
      calculate xposition ad ypostion and set the postion of tooltip
    }
  });
});

});

在 js.erb 文件中（ruby on rails）

$(#tooltipWindow).show();
$(this).html(<%= partial template which is shown in tooltip by passing locals %>);

在 mouseleave 事件中，我只是隐藏工具提示并清空 div。

$(td a).live('mouseleave', function(){
  $(#tooltipWindow).hide();
  $(#tooltipWindow).empty();
});

我试图用mouseout替换mouseleave，但它没有用。

任何帮助将不胜感激。

4

1 回答 1

0

Looks like you are using the wrong syntax to get the text of anchor

data: $(this).val(),   // It does not have a value property

Replace it with 

data: $(this).text(),

To avoid multiple Ajax requests when you move your mouse too fast, it is better to use setTimeout to handle the situation and clearing it frequently and avoiding multiple requests.

$(document).ready(function () {
    var timer;
    $('td a').on('mouseenter', function (e) {
        timer = setTimeout(function () {
            $.ajax({
                url: 'controller/action',
                data: $(this).text(),
                dataType: script,
                success: function () {
                    calculate xposition ad ypostion and set the postion of tooltip
                }
            });
        }, 300);
    });

    $('td a').on('mouseleave', function () {
        $('#tooltipWindow').hide();
        $('#tooltipWindow').empty();
        clearTimeout(timer);
    });
});
于 2013-06-11T17:37:20.993 回答