jQuery: событие mouseleave, похоже, срабатывает, когда оно не должно быть

Question

Учитывая следующую таблицу и скрипт html, показанные ниже, у меня возникает проблема, когда появляется событие мыши после запуска мыши, даже если я не перемещаюсь мышь вне строки.

<script type="text/javascript" language="javascript"> 
    function highlightRows(iMainID) 
    { 
     $('tr[mainid=' + iMainID+ ']').each(function() { 
      if ($(this).attr('old') == undefined) { 
       $(this).attr('old', $(this).css('backgroundColor')); 
      } 
      $(this).animate({ backgroundColor: "#FFFFCC" }, 500); 
      $(this).mouseout(function() { 
       if ($(this).attr('old') != undefined) { 
        $(this).animate({ backgroundColor: $(this).attr('old') }, 500); 
       } 
      }); 
     });   
    } 
</script> 
<table> 
    <tr> 
     <td mainid="1" onmouseover='highlightRows(1)'><div>text</div></td> 
     <td mainid="1" onmouseover='highlightRows(1)'><div>text</div></td>  
     <td mainid="2" onmouseover='highlightRows(2)'><div>text</div></td> 
    </tr> 
<table> 

Answer 1

Как указал Уокей и Джер, вы должны выбрать одну модель (JQuery) или другую (в любом случае в HTML), не смешивайте их.

Скорее всего, ваш двойной ввод связан с тем фактом, что вы подписали несколько раз на одно и то же событие. (Если вы дважды нажмете мышь, вы получите два обработчика событий mouseout, которые оба будут вызваны.)

Также следите за повторяющимися значениями «mainid». Это похоже на проблему и может быть причиной вашей проблемы.

Answer 2

Вы, вероятно, хотите сделать что-то вроде этого:

function yourMouseOver(){...} 
function yourMouseOut(){...} 

с:

<td onmouseover="yourMouseOver()" onmouseout="yourMouseOut()">html</td> 

Установка уровня onmouseout событие каждый раз, когда onmouseover событие вызывается избыточно.

Answer 3

JQuery способ сделать это было бы просто использовать hover, установленный в $(document).ready функции и как @pointy сказал отказаться от onmouseover все вместе

$(document).ready(function(){ 
    $('tr').hover(function() { 
     if ($(this).attr('old') == undefined) { 
      (this).attr('old', $(this).css('backgroundColor')); 
     } 
     $(this).animate({ backgroundColor: "#FFFFCC" }, 500); 
    }, function() { 
     if ($(this).attr('old') != undefined) { 
      $(this).animate({ backgroundColor: $(this).attr('old') }, 500); 
     } 
    }); 
}); 

Answer 4

почему бы не использовать .hover?

$('tr[mainid=' + iMainID+ ']').hover(
     function() 
     { 
      $(this).addClass('hoverClass'); 
     }, 
     function() 
     { 
      $(this).removeClass('hoverClass'); 
     } 
    );