jQuery快速鼠標移動之前事件完成前的mouseleave事件觸發器

Question

如果用戶鼠標移過表格單元格，則下拉框會用通過post調用加載的數據替換html。如果用戶鼠標移動不太快，這可以正常工作，但如果速度太快，則html不會更新，因此當用戶將鼠標移回html時不正確。

$(".edit_dropdown").bind('mouseenter', function() { 
$(this).unbind('mouseenter'); 
var a = $.trim($(this).html()); 
var id = $(this).attr('id'); 

$(this).html("<span id='s-" + id + "'></span>"); 
$.post('save/dropdown.php', { 
    id: id, 
    a: a 
}, function (data) { 
    $("#s-" + id).html(data); 

    $(".edit_dropdown").bind('mouseleave', function() { 
     var id = $(this).attr('id'); 
     var a = $("#e-" + id).val(); 
     var dir = $(this).attr('class'); 
     $(this).html(a); 
     $(this).bind('mouseenter', function() { 
      $(this).unbind('mouseenter'); 
      var a = $.trim($(this).html()); 
      var id = $(this).attr('id'); 
      $(this).html("<span id='s-" + id + "'></span>"); 
      $.post('save/dropdown.php', { 
       id: id, 
       a: a 
      }, function (data) { 
       $("#s-" + id).html(data); 
      }); 
     }); 

    }); 
}); 
}); 

HTML

<tr> 
<td>customer county</td> 
<td class="edit_dropdown" id="customer-cust_s_county"><?php echo $row['cust_s_county']; ?></td> 
</tr> 

的$。員額文件返回英國縣名單，如果縣名的HTML那麼縣城返回所選擇的選項匹配。

Answer 1

發生此問題的原因是，mouseleave處理程序僅響應於對mouseenter處理程序的異步響應而置於適當位置。

您應該尋找一個更簡單的整體代碼結構，不涉及分離和重新附加處理程序。

它應該能夠編寫保持永久連接的兩個處理程序，具體如下：

$(".edit_dropdown").on('mouseenter', function() { 
    //Perform all mouseenter actions here. 
    //If necessary, test for different states and branch as required. 
}).on('mouseleave', function() { 
    //Perform all mouseleave actions here. 
    //If necessary, test for different states and branch as required. 
}); 

還有一點：由於各縣的列表是靜態的，你可以立刻上桌它作爲頁面的原始HTML的一部分。然後您只需要返回所選縣的名稱或ID，而不是重複返回整個列表。