2012-09-04 14 views
24

Ich ändere meine Codes, um mit jQuery 1.8 kompatibel zu sein, und ich bin mit dieser hover fest, die nicht funktioniert. Als ich dann das selbe mit einem click benutzt habe, funktionierte es. Hier ist mein Code, kann mir jemand sagen, wo ich falsch liege?Jquery auf Hover funktioniert nicht

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

Was "Mouseover" statt "schweben" geschieht mit? –

Antwort

48

Veraltete wie von jQuery 1.8: Der Name "schweben" verwendet als Abkürzung für die Zeichenfolge "MouseEnter- mouseleave". Es fügt einen einzelnen Ereignishandler für diese beiden Ereignisse an, und der Handler muss event.type prüfen, um festzustellen, ob das Ereignis mouseenter oder mouseleave ist. Verwechseln Sie nicht den Pseudo-Ereignisnamen "Hover" mit der .hover() -Methode, die eine oder zwei Funktionen akzeptiert.

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

so ziemlich sagt alles, man kann "schweben" für diese Verwendung:

$(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(); 
    }); 
}); 
+0

Angenommen es gibt einen Ajax-Aufruf und der Inhalt von .top-level wird durch new ersetzt, dann würde auch dieses mouseenter funktionieren? –

+0

@param Ja, das wird gut funktionieren, diese Syntax unterstützt immer noch delegierte Ereignisse (Ereignisse, die von Elementen ausgelöst werden, die zum Zeitpunkt der Funktion def nicht im DOM waren). Dadurch wird erreicht, was Sie für dynamisch generierte Elemente benötigen. – nbrooks

+0

danke für die Antwort :) nur überprüft es mit dynamischen Inhalten, funktioniert es perfekt –

2

.on Funktion hat nur 3 Parameter: http://api.jquery.com/on/

Wenn Sie nicht Ihre Handler dynamisch Elemente gebunden benötigen werden auch hinzugefügt, dann können Sie die gute alte hover Funktion mit 2 Ereignishandler verwenden.

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

By the way, ist $(selector).hover(handlerIn, handlerOut) Abkürzung für $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.

Wenn Sie müssen, dann on für mouseenter und mouseleave Ereignisse verwenden:

$(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(); 
    }); 
});​ 
+0

so kann ich Hover nicht verwenden? stattdessen muss ich 'mouseenter' verwenden –

+0

danke ich schätze deine Antwort und @nbrooks antworte beide. beide sind richtig, danke für solche Detailerklärungen –

5

gibt es keine "schweben" Ereignis. gibt es .hover() -Funktion, die 2 Rückrufe (wie in Ihrem Beispiel) dauert. Versuchen

+1

Stellen Sie sich vor, wenn alle Antworten so prägnant und direkt auf den Punkt gebracht werden könnten. Gut gemacht! – Operator

0

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

diesen Code Versuchen mit jquery 1.8 Ich denke, dass die Arbeit gut:

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

Versuchen:

$(".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(); 
    }); 
    } 
}); 
Verwandte Themen