jQuery:El evento mouseleave parece activarse cuando no se supone que debe hacerlo.

Question

Dada la siguiente tabla HTML y el script que se muestran a continuación, tengo un problema en el que el evento de salida del mouse parece activarse justo después de ingresar, incluso si no lo saco de la fila.

<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

Como indicaron Pointy y Jer, debes elegir un modelo (JQuery) u otro (onWhatever en HTML), no los mezcles.

Lo más probable es que tu doble entrada tenga que ver con el hecho de que te estás suscribiendo varias veces al mismo evento.(Si pasa el mouse dos veces, obtendrá dos controladores de eventos de mouseout que serán llamados).

Además, tenga cuidado con los valores duplicados de "mainid".Eso parece un problema y puede ser la causa de su problema.

Answer 2

La forma de jQuery para hacerlo sería utilizar simplemente vuelo estacionario , situado en una función $(document).ready y al igual que @pointy dicho renunciar a la onmouseover todos juntos

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

¿por qué no usar el .hover?

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

Answer 4

Es posible que desee hacer algo como esto:

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

por:

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

Configuración de la onmouseout evento cada vez que el evento se dispara onmouseover es redundante.