web-dev-qa-db-fra.com

JQuery a-t-elle une poignée pour .Delegate ('Hover')?

J'essaie d'utiliser:

$('mydiv').delegate('hover', function() {  
    $('seconddiv').show();  
}, function() {  
    //For some reason jQuery won't run this line of code  
    $('seconddiv').hide();  
});
jquerydelegateshandler
36
Chris Abrams

User113716's Greour Répondre ne fonctionnera plus dans JQuery 1.9 +, car le pseudo-événementhover n'est plus pris en charge ( Guide de mise à nivea ).

Également depuis JQuery 3.delegate() Pour les événements de liaison est officiellement obsolète, veuillez donc utiliser le nouveauon()(Docs) Pour toutes les fins de liaison des événements.

Vous pouvez facilement migrer ser113716 Solution en remplaçant hover avec mouseenter mouseleave Et basculant sur la syntaxe on() Syntaxe:

$('mydiv').on('mouseenter mouseleave', 'seconddiv', function(event) {
    $(this).toggle( event.type === 'mouseenter' );  
});

Si votre problème est plus complexe qu'un simple toggle, je suggère de lier deux événements distincts:

$('mydiv').on('mouseenter', 'seconddiv', function( event ) {
    // do something
}).on('mouseleave', 'seconddiv', function( event ) {
    // do something different
});

NB: car hover a été supprimé en v1.9 et on() a été introduit dans V1.7, il n'y a pas de besoin réel de solution utilisant delegate() - Mais si vous l'aimez pour une raison quelconque; Il est toujours là (pour l'instant) et fait le travail:

$('mydiv').delegate('seconddiv','mouseenter mouseleave', function(event) {
    $(this).toggle( event.type === 'mouseenter' );  
});
48
DerVO

Je sais que l'op voulait une solution delegate (alors j'étais quand j'ai heurté cette question ...)

Mais après davantage enquête J'ai découvert qu'il est possible d'obtenir le même code sans JS/JQuery du tout

Tout ce dont vous avez besoin est un peu CSS 

.someContainer .seconddiv{
    display : none;
}

.someContainer:hover .seconddiv{
    display : block;
}

InMo c'est une solution beaucoup plus efficace/ligthwheigth

2
Daniel

.delegate() n'a pas de poignée. De plus, vous avez besoin de spécifier l'élément que vous ciblez avec le premier paramètre.

Vous pouvez essayer quelque chose comme ça, cependant:

$('table').delegate('tr', 'hover', function() {  
    $(this).toggle();
});
1
Michael Irigoyen

Edit: Mauvaiseformation supprimée.

Si vous souhaitez utiliser la méthode hover() sans délégation, le code de travail ressemblerait à ceci:

$('#mydiv').hover(function() {  
    $('#seconddiv').show();  
}, function() {  
    $('#seconddiv').hide();  
});

Deuxièmement, delegate est d'attribuer un gestionnaire d'événements à un enfant, vous devez donc spécifier d'abord un sélecteur. Si vous devez vous assurer que ce gestionnaire d'événements existe pour des éléments ajoutés dynamiquement, je préférerais .live() Dans ce cas avec mouseenter et mouseleave.

$('#mydiv').live('mouseenter', function() {  
    $('#seconddiv').show();  
}).live('mouseleave', function() {  
    $('#seconddiv').hide();  
});
1
mVChr