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

好的，让我们尝试以我的方式解决此问题 ..您可以尝试下一个代码..，请尝试添加detection_graph.get_tensor_by_name('accuracy:0')

//comments to your code

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

注意，最好不要为用户检查$(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添加一个类，然后像{ {1}}，然后不需要第一个a，您就可以直接转到响应页面

将鼠标悬停在链接上时，并非总是执行Ajax调用

1 个答案: