在鼠标悬停时在Chrome中闪烁的问题div

Question

我写了一个JavaScript，它根据提供给它的jSON数据生成动态元素。

$(function() { 
     var list = JSON.parse(@ViewBag.NomineeList); 
     var counter = 1; 
     var tr; 
     $(list).each((function() { 
      if (counter % 2 != 0) { 
       tr = CreateElems('tr', null, null); 
      } 
      var td = CreateElems('td', null, null); 
      var div = CreateElems('div', 'dvBorder', null); 
      div.attr('empID', this.EmpId); 
      div.attr('nomineeID', this.Id); 
      RegisterEvents(div); 
      div.append('<img alt="user" src=' + this.UserImagePath + ' style="padding: 5px;" />'); 
      div.append(CreateElems('span', 'EmpolyeeName', this.FirstName)); 
      div.append(CreateElems('span', 'EmployeeEmail', this.Email)); 
      td.append(div); 
      tr.append(td); 
      if (counter % 2 == 0) { 
       $('#tblEmployee').append(tr); 
       tr = ""; 
      } 
      counter++; 
     })); 
    }); 

    function CreateElems(type,cssClass,value) 
    { 
     var elem = $(document.createElement(type)); 

     if(value != null) 
      elem.text(value); 

     if(cssClass!= null) 
      elem.addClass(cssClass); 

     return elem; 
    } 

有三个不同的事件，我已注册为创建的动态元素。

function RegisterEvents(crntDiv) { 
     var url; 
     $(crntDiv).click(function() { 
      url = "/home/SaveVote?nomineeId=" + $(crntDiv).attr('nomineeID'); 
      AjaxCall(url, false, crntDiv); 
     }); 

     $(crntDiv).mouseover(function() { 
      RemoveToolTip(); 
      url = "/home/GetDescription?nomineeId=" + $(crntDiv).attr('nomineeID'); 
      AjaxCall(url, true, crntDiv); 
     }); 

     $(crntDiv).mouseout(function() { 
      $(crntDiv).children('div.RollOverTip').remove(); 
     }); 

    } 

当鼠标滑过工具提示出现时。在这个事件中，我正在检查是否有任何以前的工具提示存在于dom中，它应该被删除。

function RemoveToolTip() { 
      $('#tblEmployee').find('div.RollOverTip').remove(); 
     } 

但是仍然有些时候浏览器上有三个以上的工具提示。也可以优化一下。

的Html

<table border="0" cellpadding="5" cellspacing="0" id="tblEmployee"> 
     </table> 

CSS类。

.dvBorder 
{ 
    background-image: url(/Images/screen2-button.png); 
    background-repeat: no-repeat; 
    height: 125px; 
    width: 400px; 
    cursor:pointer; 
    position: relative; 
} 


.RollOverTip 
{ 
    background-image: url("/Images/screen2-rollover-tooltip.png"); 
    background-repeat: no-repeat; 
    color: #000000; 
    font-family: Calibri Regular; 
    font-size: 18pt; 
    height: 199px; 
    line-height: 20pt; 
    margin-left: 385px; 
    position: absolute; 
    width: 474px; 
    z-index: 90000; 
    padding:34px; 
} 

什么是可能的优化脚本，也有任何建议，以消除闪烁？

Answer 1

尝试使用mouseenter和mouseleave停止闪烁

$(crntDiv).mouseenter(function() { 
     RemoveToolTip(); 
     url = "/home/GetDescription?nomineeId=" + $(crntDiv).attr('nomineeID'); 
     AjaxCall(url, true, crntDiv); 
    }); 

    $(crntDiv).mouseleave(function() { 
     $(crntDiv).children('div.RollOverTip').remove(); 
    }); 

Answer 2

尝试使用mouseenter和mouseleave它可能会解决问题，而不是鼠标悬停和鼠标移开

编辑

试试这个： 变更

到

$(document).on('mouseenter',$(crntDiv,'#tblEmployee div.RollOverTip'), function() {...}