addClass, removeClass problema con <tr>

[fast_10]

buenas,

asi como menciona el titulo las funciones addClass y removeClass no me funcionan para filas ingresadas con el append de jquery, tengo una lista de registros que se cargan de la base de datos y agregan con la funcion de acontinuacion, que funciona bien

Código Javascript:

$("#lista tbody").append("<tr>" +
                                    "<td>" + variable_js1+ "</td>" +
                                    "<td>" + variable_js2 + "</td>" +
                                    "<td> <img src='../imagenes/holi.jpg'>" +
                                "</tr>");
 

ahora necesito cambiar el fondo de color de la fila donde este el mouse, para eso agregue este estilo:

Código Javascript:

.tr_hover {
                background-color: #0073EE;
                color:#fff;
 
            }
 

y agregue en el document.ready lo siguiente

Código Javascript:

$("#lista tbody tr").mouseover(function () {
                    $(this).addClass("tr_hover");
 });
 
 $("#users tbody tr").mouseout(function () {
                    $(this).removeClass("tr_hover");
});
 

ahora para testear, agregue una fila a directamente, y para mi sopresa esta si cambia de color el fondo cuando el mouse esta sobre la fila.

Código HTML:

<table id="users" class="ui-widget ui-widget-content">
        <thead>
            <tr class="ui-widget-header ">
                <th>titulo 1</th>
                <th>titulo 2</th>
                <th>titulo 3</th>
                
            </tr>
        </thead>
       <tbody>
            <tr>
                <td>no dinamico</td>
                <td>no dinamico</td>
                <td>no dinamico</td>
               </tr>
       </tbody>
        <tfoot>
            <tr>
                <td colspan="3">
                    contador o cualquier cosa en el foot que me tinque
                </td>
            </tr>
        </tfoot>
    </table>
 

ahora mi duda es porque las filas agregadas con el append no cambian de clase, quizás ahi una regla de jquery que desconsca, en realidad no soy muy experto en el tema, pero me gustaría que alguien me ayudará desde ya muchas gracias por su tiempo y ayuda

como dato adicional mencionar que revise el html que se generaba y las filas del append que se agregaban estan entre el tbody obviamente.

[pzin]

¿Por qué no usas directamente :hover en vez de hacer añadir clases con jQuery?

Con algo así deberías de ahorrarte eso de añadir clases.

Código CSS:

tr:hover {
  background-color: #0073EE;
  color:#fff;
}
 

Así aplicas a cada fila (tr) lo que sea cuando el mouse pase por encima (:hover). Lo que estás haciendo es como reinventar la Coca-Cola.

[fast_10]

Iniciado por Bonez

¿Por qué no usas directamente :hover en vez de hacer añadir clases con jQuery?

Con algo así deberías de ahorrarte eso de añadir clases.

Código CSS:

tr:hover {
  background-color: #0073EE;
  color:#fff;
}
 

Así aplicas a cada fila (tr) lo que sea cuando el mouse pase por encima (:hover). Lo que estás haciendo es como reinventar la Coca-Cola.

muchas gracias me fue de ayuda, en realidad me cegué con tanto uso de js, me quedo con la css, saludos