img - mouseleave jquery

jquery live hover

Question

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 moviendo 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 () {}
);

Answer 1

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

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

Esto requiere dos enlaces pero funciona igual de bien.

Answer 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 nuestros motivos :). De todos modos, utilicé el método en vivo para el vuelo estacionario que funcionó muy bien en Chrome (IE9 lo hizo bien, pero no genial). Sin embargo, en IE8 no solo disminuyó la velocidad de los menús (tenía que pasar un par de segundos antes de que cayera), pero todo en la página era muy lento, incluido el desplazamiento e incluso la comprobación de casillas de verificación simples.

Al vincular los eventos directamente después de cargarlos se obtuvo un rendimiento adecuado.

Answer 3

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

Answer 4

jQuery 1.4.1 ahora es compatible con "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 () {

    }
});

Answer 5

.live() ha quedado obsoleto a partir de jQuery 1.7

Utilice .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

Answer 6

$(''.hoverme'').live(''mouseover mouseout'', function(event) {
  if (event.type == ''mouseover'') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

api.jquery.com/live