web-dev-qa-db-fra.com

Jquery en vol stationnaire ne fonctionne pas

Je modifie mes codes pour être compatible avec jQuery 1.8 et je suis bloqué avec ce hover qui ne fonctionne pas. Quand j'ai utilisé la même chose avec un click ça a marché. Voici mon code, quelqu'un peut-il me dire où je me trompe?

$(document).on('hover', '.top-level', function (event) {
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function () {
  $(this).find('.dropfcnt').hide('blind', function () {
    $('.actionfcnt').hide();
  });
});
javascriptjqueryhtmljavascript-eventshover
33
Param Veer

Déconseillé à partir de jQuery 1.8: Le nom "hover" utilisé comme raccourci pour la chaîne " mouseenter mouseleave ". Il attache un seul gestionnaire d'événements pour ces deux événements, et le gestionnaire doit examiner event.type pour déterminer si l'événement est mouseenter ou mouseleave. Ne confondez pas le pseudo-événement-nom "hover" avec la méthode .hover (), qui accepte une ou deux fonctions.

Source: http://api.jquery.com/on/#additional-notes

Cela dit à peu près tout, vous ne pouvez pas utiliser "hover" pour cela:

$(document).on('mouseenter','.top-level', function (event) {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level',  function(){
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
});
58
nbrooks

il n'y a pas d'événement "survol". il y a la fonction .hover () qui prend 2 rappels (comme dans votre exemple).

8
tborychowski

La fonction .on N'a que 3 paramètres: http://api.jquery.com/on/

Si vous n'avez pas besoin que vos gestionnaires soient également liés à des éléments ajoutés dynamiquement, vous pouvez utiliser la bonne vieille fonction hover avec 2 gestionnaires d'événements.

$('.top-level').hover(function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});​

Soit dit en passant, $(selector).hover(handlerIn, handlerOut) est l'abréviation de $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.

Si vous en avez besoin, utilisez on pour mouseenter et mouseleave événements:

$(document).on('mouseenter', '.top-level', function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});​
4
Danil Speransky

Essayer:

$(".top-level").on({
    mouseenter: function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
    },
    mouseleave: function (event) {
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
    }
});

OR

$(".top_level").on("hover", function(event) {
  if(event.type == "mouseenter") {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
  }
  else if (event.type == "mouseleave") {
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
  }
});
2
Sudhir Bastakoti

Essayer

$('.top-level').hover(function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
}, function(){
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
});
1
Florian Bauer