Est-ce que jQuery a un handleout pour .delegate('hover') ?

Question

J'essaie d'utiliser :

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

Answer 1

La super réponse de User113716 ne fonctionnera plus dans jQuery 1.9+. parce que le pseudo-événement hover n'est plus supporté ( guide de mise à niveau ).

De plus, depuis la version 1.7 de jQuery, il est recommandé d'utiliser la nouvelle fonction on() (docs) à des fins de liaison avec tous les événements (de toute façon delegate() fait toujours l'affaire).

Vous pouvez facilement migrer utilisateur113716 en remplaçant hover con mouseenter mouseleave :

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

Utilisation de on() :

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

Si votre problème est plus complexe qu'une 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
});

Answer 2

Avec delegate() (docs) vous l'affectez à un conteneur, et le premier argument est l'élément qui doit déclencher l'événement.

Aussi, .delegate() n'accepte qu'une seule fonction, donc pour le hover vous devez tester l'événement event.type pour déterminer show() (docs) ou hide() (docs) .

$('.someContainer').delegate('.someTarget','hover', function( event ) {
    if( event.type === 'mouseenter' )  
        $('seconddiv').show();  
    else
        $('seconddiv').hide();  
});

Pour afficher/masquer, une façon plus courte d'écrire ceci est d'utiliser toggle() (docs) qui peut accepter un commutateur argument où true signifie show y false signifie hide :

$('.someContainer').delegate('.someTarget','hover', function( event ) {
    $('seconddiv').toggle( event.type === 'mouseenter' );  
});

Notez que le mouseenter L'événement est signalé à partir du jQuery 1.4.3 . Si vous utilisez 1.4.2 il sera signalé comme mouseover .

---

EDIT :

Si je comprends bien vos commentaires ci-dessous, vous auriez quelque chose comme ceci (en utilisant les sélecteurs appropriés, bien sûr).

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

Answer 3

Je sais que l'OP voulait un delegate (je l'étais aussi quand je suis tombé sur cette question...)

Mais après d'autres enquête J'ai découvert qu'il est possible de faire la même chose sans js/jquery code du tout

Tout ce dont vous avez besoin est un peu de CSS

.someContainer .seconddiv{
    display : none;
}

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

INMO est une solution beaucoup plus efficace et légère.

Answer 4

.delegate() n'a pas de poignée de sortie. En outre, vous devez spécifier l'élément que vous ciblez avec le premier paramètre.

Vous pourriez cependant essayer quelque chose comme ceci :

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

Answer 5

EDIT : suppression des informations erronées.

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

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

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

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