jquery live hover

161

Sto usando il seguente codice jquery per mostrare un pulsante di eliminazione contestuale solo per le righe della tabella che stiamo passando con il mouse. Funziona ma non per le righe che sono state aggiunte al volo con js / ajax ...

C'è un modo per farlo funzionare con eventi dal vivo?

$("table tr").hover(
  function () {},
  function () {}
);

jquery live jquery-1.4

— Jorre
fonte

245

jQuery 1.4.1 ora supporta "hover" per eventi live (), ma solo con una funzione del gestore eventi:

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

function () {

});

In alternativa, puoi fornire due funzioni, una per mouseenter e una per mouseleave:

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

    },
    mouseleave: function () {

    }
});

— Philippe Leybaert
fonte

Tuttavia non funziona ancora per me. Ho provato a fare questo: dove sbaglio? > $ ('table tr'). live ('hover', function () {$ (this) .find ('. deletebutton'). toggle ();});

— Shripad Krishna,

1

questo non è corretto e non funziona. vedere l'intestazione "Eventi multipli" nella documentazione per live: api.jquery.com/live

— Jason

34

A partire da jQuery 1.4.2, .live ("hover") è equivalente a .live ("mouseover mouseout"), NOT .live ("mouseenter mouseleave") - vedi bugs.jquery.com/ticket/6077 Quindi, fallo. live ("mouseenter mouseleave", function () {...}) o .live ("mouseenter", function () {...}). live ("mouseleave", function () {...})

— AEM

2

grazie @aem, questo ha funzionato per me: $ ("table tr"). live ("mouseenter", function () {...}). live ("mouseleave", function () {...});

— jackocnr,

3

Come da pagina della documentazione di JQuery.live , dice .oninvece di usare . "A partire da jQuery 1.7, il metodo .live () è obsoleto. Utilizzare .on () per collegare i gestori di eventi."

— 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

Ha funzionato anche per me. +1 Ho provato a fare la versione di Philippe, sia con mouseover che mouseenter - né ha funzionato. Ma questo lo ha fatto. Grazie!

— eduncan911,

.liveè deprecato ora, vedere la risposta di Andre per il metodo di sostituzione ora.

— johntrepreneur

1

L'uso mouseovere gli mouseouteventi qui causeranno il lancio continuo del codice mentre l'utente sposta il mouse all'interno dell'elemento. Penso mouseentere mouseleavesono più appropriati dal momento che sparerà solo una volta all'entrata.

— johntrepreneur

60

.live() è stato deprecato a partire da jQuery 1.7

Utilizzare .on()invece e specificare un selettore discendente

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

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector

— Andre
fonte

6

funziona perfettamente dal jquery 1.9. tutte le soluzioni live e delegate sono DEPRECATE! sarebbe fantastico se qualcuno potesse accettare la risposta accettata e accettarla invece.

— Jascha,

5

A partire da jQuery 1.4.1, l'evento hover funziona con live(). Fondamentalmente si lega solo agli eventi mouseenter e mouseleave, cosa che puoi fare anche con le versioni precedenti alla 1.4.1:

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

Ciò richiede due vincoli ma funziona altrettanto bene.

— Tatu Ulmanen
fonte

5

Questo codice funziona:

    $(".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

Che cos'è "ui-state-hover"? Come si applica alla domanda originale dell'utente?

— IgorGanapolsky,

2

ATTENZIONE: la versione live di hover comporta un significativo calo delle prestazioni. È particolarmente evidente in una grande pagina su IE8.

Sto lavorando a un progetto in cui cariciamo menu multi-livello con AJAX (abbiamo i nostri motivi :). Comunque, ho usato il metodo live per l'hover che ha funzionato alla grande su Chrome (IE9 ha funzionato bene, ma non eccezionale). Tuttavia, in IE8 non solo ha rallentato i menu (dovevi passare un paio di secondi prima che cadesse), ma tutto sulla pagina era dolorosamente lento, incluso lo scorrimento e persino il controllo di semplici caselle di controllo.

L'associazione degli eventi direttamente dopo il loro caricamento ha comportato prestazioni adeguate.

— Brian
fonte

2

utile, ma più un commento che una risposta.

— mikemaccana,