jquery: mouseleave event seems to fire when it's not supposed to

Question

Given the following html table and script shown below I am having a problem where the mouse leave event appears to fire right after the mouse enter, even if I don't move the mouse out of the row.

<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

You probably want to do something like this:

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

with:

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

Setting the onmouseout event every time the onmouseover event is fired is redundant.

Answer 2

As Pointy and Jer both indicated, you should choose one model (JQuery) or the other (onWhatever in HTML), don't mix them.

Most likely, your double-entry has to do with the fact that you're subscribing multiple times to the same event. (If you do mouseover twice, you get two mouseout event handlers that will both be called.)

Also, watch out for the duplicate "mainid" values. That looks like a problem, and may be the cause of your issue.

Answer 3

The jquery way to do it would be to just use hover, set in a $(document).ready function and like @pointy said forgo the onmouseover all together

$(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

why not use the .hover?

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