悬停两次以加载 ajax

Hover twice for ajax to load

本文关键字：加载 ajax 两次 悬停      更新时间：2023-09-26

这有效，但是当我第一次悬停时，没有任何加载。当我关闭鼠标然后重新打开时，ajax 已加载。我希望 ajax 在第一次悬停时加载。

索引.html

<span title="" id="test" class="tooltip"></span>

工具提示.html

<span id="test">this is ajax</span>

jquery

$('.tooltip').hover(function () {
    var id = $(this).attr('id');
    $.get('tooltip.html #'+id, function(data) {
        $('#'+id).attr('title', data);
    });
});

看起来您依赖于浏览器的内置工具提示（悬停时显示标题。该工具提示可能由 mouseover 事件触发，这意味着在动态添加标题后，需要另一个 mouseover 事件才能实际触发工具提示。似乎它正在按设计工作。

这是因为第一次悬停（实际上是 mouseenter 事件）时，ajax 函数加载数据并更改标题，但 mouseenter 事件已经触发，并且工具提示已经打开，所以为时已晚。

最好的办法是直接更改工具提示，而不是更改原始元素的标题。

您实际上应该做的是更改两者并更改悬停功能以检查标题，以便下次悬停发生时，您无需再次加载信息，而是引用已填充的标题。

希望对:)有所帮助

正如前面所指出的，问题是浏览器会在您将鼠标悬停在元素上时立即显示内置标题，而 ajax 会花费一些时间来加载内容并附加它。

我建议您使用许多工具提示插件之一：https://www.google.com/search?q=tooltip+jquery+plugin

我对qTip有一些很好的体验。易于设置和重新设计样式。

相关文章：