Question

当我在锚标签上执行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，但它没有用。

任何帮助将不胜感激。

Answer 1

您似乎使用了错误的语法来获取锚文本

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

将其替换为

data: $(this).text(),

为了避免在移动鼠标时过快发出多个Ajax请求，最好使用setTimeout来处理这种情况并经常清除它并避免多次请求。

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

鼠标离开失败多个ajax请求

1 个答案: