jquery pairar ao vivo

161

Estou usando o seguinte código jquery para mostrar um botão de exclusão contextual apenas para as linhas da tabela que estamos passando com o mouse. Isso funciona, mas não para as linhas que foram adicionadas com js / ajax em tempo real ...

Existe uma maneira de fazer isso funcionar com eventos ao vivo?

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

Respostas:

245

O jQuery 1.4.1 agora suporta "hover" para eventos live (), mas apenas com uma função de manipulador de eventos:

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

function () {

});

Como alternativa, você pode fornecer duas funções, uma para o mouseenter e outra para o mouse mouseleave:

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

    },
    mouseleave: function () {

    }
});
Philippe Leybaert
fonte
Ainda não funciona para mim. Tentei fazer o seguinte: Onde estou errado? > $ ('tabela tr'). live ('hover', function () {$ (this) .find ('. deletebutton'). toggle ();});
Shripad Krishna 6/06/10
1
isso está incorreto e não funciona. consulte o cabeçalho "Multiple Events" na documentação de live: api.jquery.com/live
Jason
34
A partir do jQuery 1.4.2, .live ("hover") equivale a .live ("mouseover mouseout"), NOT .live ("mouseenter mouseleave") - consulte bugs.jquery.com/ticket/6077 . live ("mouseenter mouseleave", function () {...}) ou .live ("mouseenter", function () {...}). live ("mouseleave", function () {...})
aem
2
obrigado @ aem, isso funcionou para mim: $ ("table tr"). live ("mouseenter", function () {...}). live ("mouseleave", function () {...});
22411 jackocnr
3
De acordo com a página de documentação do JQuery .live, ela diz para usar .on. "A partir do jQuery 1.7, o método .live () está obsoleto. Use .on () para anexar manipuladores 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
fonte
Trabalhou para mim também. +1 Tentei fazer a versão de Philippe, tanto com mouseover quanto com mouseenter - nem funcionou. Mas este fez. Obrigado!
precisa saber é o seguinte
.liveestá obsoleto agora, veja a resposta de Andre para o método de substituição agora.
johntrepreneur
1
O uso mouseovere os mouseouteventos aqui farão com que o código seja acionado continuamente à medida que o usuário move o mouse dentro do elemento. Penso mouseentere mouseleavesou mais apropriado, pois só dispara uma vez ao entrar.
precisa saber é o seguinte
60

.live() foi descontinuado a partir do jQuery 1.7

Use em .on()vez disso e especifique um seletor descendente

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

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector
Andre
fonte
6
isso funciona perfeitamente a partir do jquery 1.9. todas as soluções ao vivo e delegadas são DEPRECADAS! seria incrível se alguém pudesse aceitar a resposta aceita e aceitá-la.
Jascha
5

A partir do jQuery 1.4.1, o evento hover trabalha com live(). Basicamente, apenas se vincula aos eventos mouseenter e mouseleave, o que você também pode fazer com as versões anteriores à 1.4.1:

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

Isso requer duas ligações, mas funciona tão bem.

Tatu Ulmanen
fonte
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
fonte
2
O que é "ui-state-hover"? Como isso se aplica à pergunta original do usuário?
IgorGanapolsky
2

AVISO: Há uma penalidade de desempenho significativa na versão ao vivo do hover. É especialmente visível em uma página grande no IE8.

Estou trabalhando em um projeto no qual carregamos menus de vários níveis com o AJAX (temos nossos motivos :). Enfim, usei o método ao vivo para o hover, que funcionou muito bem no Chrome (o IE9 funcionou bem, mas não foi ótimo). No entanto, no IE8, ele não apenas diminuiu a velocidade dos menus (você precisou passar o mouse por alguns segundos antes que ele caísse), mas tudo na página era dolorosamente lento, incluindo rolagem e até verificação de caixas de seleção simples.

A ligação dos eventos diretamente após o carregamento resultou em desempenho adequado.

Brian
fonte
2
útil, mas mais um comentário do que uma resposta.
Mikemaccana