Вызов 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 проверяет, находится ли пользователь над ссылкой, содержащей имя пользователя, и, если да, отправляет «да» в качестве ответа.Если это ссылка с именем пользователя, то второй вызов применяет ховеркарту ко всем другим вещам, которые должны отображаться (я оставил этот бит, чтобы не загромождать сообщение, поскольку оно не имеет отношения к проблеме).

Этовсе работает отлично.Единственная проблема заключается в том, что иногда, если вы наводите курсор мыши на пользователя A, а затем на пользователей B, C и D, он не отображает информацию для A, B, C и D, а A, A, A, A. Другими словами, он застревает и отображает информацию только для одного пользователя, как будто вы продолжаете парить над одной и той же ссылкой снова и снова.

Я проверил консоль и увидел, что когдаэто происходит, он не отправляет запросы AJAX вообще.Таким образом, вместо отправки запроса на B, он ничего не отправляет, а просто продолжает отображать A.Если я начну немного прокручивать страницу или обновлять, проблема исчезнет, ​​и все снова будет нормально.Это происходит как в Chrome, так и в Firefox.

Сначала я подумал, что это может быть проблема с кэшированием, поэтому я добавил $ajaxSetup({ cache:false }) в самый верх, но это не помогло.

Любая помощь очень ценится ...

Answer 1

Хорошо, давайте попробуем решить эту проблему по-моему .. вы можете попробовать следующий код .. и попробуйте добавить //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 для пользователей или ссылки .. вы можете просто добавить класс только дляпользователи a затем используйте его как a.username тогда нет необходимости в первом $.post вы можете перейти на страницу ответа напрямую