jquery - 将鼠标悬停在链接上时并不总是执行 Ajax 调用

Question

每当用户将鼠标悬停在某个包含用户名的超链接上时，我有一段代码可以在社交网络类型的网站上创建一个悬停卡(带有一些附加信息的框):

$(function() {

 $('body').on('mouseenter', 'a', function(){

    $(this).attr('data-value', '10');
    let username = $(this).attr('href');

    $.post("includes/handlers/hovercard.php", {username:username}, function(data){

                     if(data === "yes") 
                        $('a[data-value=10]').wrap("<div class='hov' style='display:inline-block;'></div>");

                     else 
                        $('a[data-value=10]').removeAttr('data-value');

   });  
  $.post("includes/handlers/hovercard_response.php", {username:username}, function(response){
                     $('.hov').append('<span></span>');
                     $(".hov span").html(response);

                     $('.hov').each(function(){

                         $(this).on('mouseover', 'a', function(){
                             return false;
                         });
                     });

           //...and then some buttons, links and etc are displayed...

  }).on('mouseleave', 'a', function(){
             $('a[data-value=10]').removeAttr('data-value');
     });

});

第一个 ajax 响应检查用户是否将鼠标悬停在包含用户名的链接上，如果是，则发送“yes”作为响应。如果它是带有用户名的链接，那么第二次调用将应用悬停卡以及应显示的所有其他内容(我保留了这一点，以免使帖子困惑，因为它与问题无关)。

这一切都运行良好。唯一的问题是，有时，如果您将鼠标悬停在用户 A 上，然后悬停在用户 B、C 和 D 上，它不会显示 A、B、C 和 D 的信息，而是显示 A、A ，A，A。换句话说，它会卡住并仅显示一个用户的信息，就好像您一遍又一遍地将鼠标悬停在同一链接上一样。

我检查了控制台，发现发生这种情况时，它根本不发送ajax请求。因此，它不会发送对 B 的请求，而是不会发送任何内容，只是继续显示 A。如果我开始稍微滚动页面或刷新，问题就会消失，一切都会恢复正常。 Chrome 和 Firefox 上都会出现这种情况。

我首先认为这可能是一些缓存问题，所以我在最顶部添加了 $ajaxSetup({ cache:false })，但这没有帮助。

非常感谢任何帮助...

Answer 1

好吧，让我们尝试用我的方式解决这个问题..您可以尝试下一个代码..并请尝试在您的代码中添加//注释

$(function() {
  // href mouse enter event
  $(document).on('mouseenter', 'a', function(){
      // remove all data-value and empty spans
      $('a[data-value=10]').removeAttr('data-value').find('.hov').remove();
      // set the data-value
      $(this).attr('data-value', '10');
      // get a user name .. using var
      var username = $(this).attr('href').trim();

      // post to hovercard page
      $.post("includes/handlers/hovercard.php", {username:username}, function(data){
        var data = data.trim(); // trim data to avoid right/left white spaces
        if(data === "yes"){
        // run the next ajax post to response
          $.post("includes/handlers/hovercard_response.php", {username:username}, function(response){
             // append .hov with span with response
             $('a[data-value=10]').append("<div class='hov' style='display:inline-block;'><span>"+response+"</span></div>");
           });
        }else{
          $('a[data-value=10]').removeAttr('data-value').find('.hov').remove();
        }
      });  

  }).on('mouseleave', 'a', function(){ // mouse leave event
      $('a[data-value=10]').removeAttr('data-value').find('.hov').remove();
  });

  // stop .hov propagation without need to .each
  $(document).on('mouseover', '.hov', function(e){
      e.stopPropagation();
  });
});

如果您发现一些语法错误，请告诉我

注意检查用户或链接的a并不是一个好主意。您可以简单地为用户a添加一个类> 然后像a.username一样使用它，然后不需要第一个$.post你可以直接转到响应页面