jquery live hover

161

Estoy usando el siguiente código jquery para mostrar un botón de eliminación contextual solo para las filas de la tabla que estamos pasando con nuestro mouse. Esto funciona pero no para las filas que se han agregado con js / ajax sobre la marcha ...

¿Hay alguna manera de hacer que esto funcione con eventos en vivo?

$("table tr").hover(
  function () {},
  function () {}
);
jquery live jquery-1.4 Jorre
fuente

Respuestas:

245

jQuery 1.4.1 ahora admite "hover" para eventos live (), pero solo con una función de controlador de eventos:

$("table tr").live("hover",

function () {

});

Alternativamente, puede proporcionar dos funciones, una para mouseenter y otra para mouseleave:

$("table tr").live({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});
Philippe Leybaert
fuente
Sin embargo, todavía no funciona para mí. Intenté hacer esto: ¿Dónde me estoy equivocando? > $ ('table tr'). live ('hover', function () {$ (this) .find ('. deletebutton'). toggle ();});
Shripad Krishna
1
Esto es incorrecto y no funciona. vea el encabezado "Eventos múltiples" en la documentación para live: api.jquery.com/live
Jason
34
A partir de jQuery 1.4.2, .live ("hover") es equivalente a .live ("mouseover mouseout"), NO .live ("mouseenter mouseleave"); consulte bugs.jquery.com/ticket/6077 . live ("mouseenter mouseleave", function () {...}), o .live ("mouseenter", function () {...}). live ("mouseleave", function () {...})
aem
2
gracias @aem, esto funcionó para mí: $ ("table tr"). live ("mouseenter", function () {...}). live ("mouseleave", function () {...});
jackocnr
3
Según la página de documentación de JQuery.live , dice usar .onen su lugar. "A partir de jQuery 1.7, el método .live () está en desuso. Use .on () para adjuntar controladores de eventos".
johntrepreneur
110 
$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

http://api.jquery.com/live/

dmitko
fuente
Me funcionó a mi también. Intenté hacer la versión de Philippe, ambos con mouseover y mouseenter, ninguno funcionó. Pero este sí. ¡Gracias!
eduncan911
.liveestá en desuso ahora, vea la respuesta de Andre para el método de reemplazo ahora.
johntrepreneur
1
El uso de mouseovery mouseouteventos aquí hará que el código se active continuamente a medida que el usuario mueve el mouse dentro del elemento. Creo mouseentery soy mouseleavemás apropiado ya que solo se disparará una vez al entrar.
johntrepreneur
60

.live() ha quedado en desuso a partir de jQuery 1.7

Use en su .on()lugar y especifique un selector descendiente

http://api.jquery.com/on/

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector
Andre
fuente
66
Esto funciona perfectamente a partir de jquery 1.9. ¡todas las soluciones en vivo y delegadas están DESAPROBADAS! Sería increíble si alguien pudiera no aceptar la respuesta aceptada y aceptar esta en su lugar.
jascha
5

A partir de jQuery 1.4.1, el evento hover funciona con live(). Básicamente solo se une a los eventos mouseenter y mouseleave, lo que también puede hacer con versiones anteriores a 1.4.1:

$("table tr")
    .mouseenter(function() {
        // Hover starts
    })
    .mouseleave(function() {
        // Hover ends
    });

Esto requiere dos enlaces pero funciona igual de bien.

Tatu Ulmanen
fuente
5

Este código funciona:

    $(".ui-button-text").live(
        'hover',
        function (ev) {
            if (ev.type == 'mouseover') {
                $(this).addClass("ui-state-hover");
            }

            if (ev.type == 'mouseout') {
                $(this).removeClass("ui-state-hover");
            }
        });
Jorge E. Cardona
fuente
2
¿Qué es "ui-state-hover"? ¿Cómo se aplica eso a la pregunta original del usuario?
IgorGanapolsky
2

ADVERTENCIA: Hay una penalización de rendimiento significativa con la versión en vivo de hover. Es especialmente notable en una página grande en IE8.

Estoy trabajando en un proyecto donde cargamos menús de varios niveles con AJAX (tenemos nuestras razones :). De todos modos, utilicé el método en vivo para el vuelo estacionario que funcionó muy bien en Chrome (IE9 funcionó bien, pero no genial). Sin embargo, en IE8 no solo redujo la velocidad de los menús (tenía que pasar el mouse por unos segundos antes de que cayera), sino que todo en la página era extremadamente lento, incluido el desplazamiento e incluso marcar casillas de verificación simples.

La vinculación de los eventos directamente después de la carga dio como resultado un rendimiento adecuado.

Brian
fuente
2
útil, pero más un comentario que una respuesta.
mikemaccana