CODEWITHSUNDEEP
jquerymouseleavemouseenter
Jeremy
Jeremy

Reputation: 46440

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

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>

Upvotes: 1

Views: 3642

Answers (4)

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

why not use the .hover?

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

Upvotes: 1

munch
munch

Reputation: 6321

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);
       }
    });
});

Upvotes: 1

John Fisher
John Fisher

Reputation: 22727

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.

Upvotes: 3

Jeremy
Jeremy

Reputation: 22435

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.

Upvotes: 0

Related Questions