jquery live hover

161

J'utilise le code jquery suivant pour afficher un bouton de suppression contextuelle uniquement pour les lignes de table que nous survolons avec notre souris. Cela fonctionne mais pas pour les lignes qui ont été ajoutées avec js / ajax à la volée ...

Existe-t-il un moyen de faire fonctionner cela avec des événements en direct?

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

Réponses:

245

jQuery 1.4.1 prend désormais en charge le "survol" pour les événements live (), mais uniquement avec une fonction de gestionnaire d'événements:

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

function () {

});

Vous pouvez également fournir deux fonctions, une pour mouseenter et une pour mouseleave:

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

    },
    mouseleave: function () {

    }
});
Philippe Leybaert
la source
Cela ne fonctionne toujours pas pour moi. J'ai essayé de faire ceci: où est-ce que je vais mal? > $ ('table tr'). live ('hover', function () {$ (this) .find ('. deletebutton'). toggle ();});
Shripad Krishna
1
cela est incorrect et ne fonctionne pas. voir l'en-tête "Multiple Events" sous la documentation pour live: api.jquery.com/live
Jason
34
Depuis jQuery 1.4.2, .live ("hover") est équivalent à .live ("mouseover mouseout"), PAS .live ("mouseenter mouseleave") - voir bugs.jquery.com/ticket/6077 Alors, faites-le. live ("mouseenter mouseleave", function () {...}) ou .live ("mouseenter", function () {...}). live ("mouseleave", function () {...})
aem
2
merci @aem, cela a fonctionné pour moi: $ ("table tr"). live ("mouseenter", function () {...}). live ("mouseleave", function () {...});
jackocnr
3
Selon la page de documentation JQuery .live, il est conseillé d'utiliser à la .onplace. "Depuis jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () pour attacher des gestionnaires d'événements."
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
la source
A travaillé pour moi aussi. +1 J'ai essayé de faire la version de Philippe, à la fois avec mouseover et mouseenter - ni l'un ni l'autre n'a fonctionné. Mais celui-ci l'a fait. Merci!
eduncan911
.liveest obsolète maintenant, voir la réponse d'André pour la méthode de remplacement maintenant.
johntrepreneur
1
L'utilisation d' événements mouseoveret mouseoutici provoquera le déclenchement continu du code lorsque l'utilisateur déplace la souris à l'intérieur de l'élément. Je pense mouseenteret je suis mouseleaveplus approprié car il ne tirera qu'une fois à l'entrée.
johntrepreneur
60

.live() est obsolète depuis jQuery 1.7

Utilisez à la .on()place et spécifiez un sélecteur descendant

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

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector
André
la source
6
cela fonctionne parfaitement à partir de jquery 1.9. toutes les solutions en direct et déléguées sont obsolètes! ce serait génial si quelqu'un pouvait rejeter la réponse acceptée et accepter celle-ci à la place.
jascha
5

Depuis jQuery 1.4.1, l'événement de survol fonctionne avec live(). Il se lie simplement aux événements mouseenter et mouseleave, ce que vous pouvez également faire avec les versions antérieures à 1.4.1:

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

Cela nécessite deux liaisons mais fonctionne tout aussi bien.

Tatu Ulmanen
la source
5

Ce code fonctionne:

    $(".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
la source
2
Qu'est-ce que "ui-state-hover"? Comment cela s'applique-t-il à la question initiale de l'utilisateur?
IgorGanapolsky
2

AVERTISSEMENT: il y a une pénalité de performances significative avec la version live du survol. C'est particulièrement visible sur une grande page sur IE8.

Je travaille sur un projet où nous chargeons des menus multi-niveaux avec AJAX (nous avons nos raisons :). Quoi qu'il en soit, j'ai utilisé la méthode en direct pour le survol qui fonctionnait très bien sur Chrome (IE9 a bien fonctionné, mais pas génial). Cependant, dans IE8, non seulement cela ralentissait les menus (vous deviez survoler pendant quelques secondes avant qu'il ne tombe), mais tout sur la page était extrêmement lent, y compris le défilement et même la vérification de simples cases à cocher.

La liaison des événements directement après leur chargement a donné des performances adéquates.

Brian
la source
2
utile, mais plus un commentaire qu'une réponse.
mikemaccana le