JQuery ha un handleout per .delegate (‘hover’)?

Sto cercando di usare:

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

La grande risposta di User113716 non funzionerà più in jQuery 1.9+ , perché lo hover pseudo-evento non è più supportato ( guida all’aggiornamento ).

Inoltre, poiché jQuery 3.0 delegate() per gli eventi di binding è ufficialmente deprecato, quindi si prega di utilizzare il nuovo on() (docs) per tutti gli scopi di associazione degli eventi.

È ansible migrare facilmente la soluzione di mouseenter mouseleave sostituendo hover con mouseenter mouseleave e passando alla syntax on() :

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

Se il tuo problema è più complesso di un semplice toggle , ti suggerisco di colbind due eventi separati:

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

NB: Poiché hover stato rimosso in v1.9 e on() stato introdotto nella v1.7, non vi è alcuna reale necessità di una soluzione usando delegate() – ma se ti piace per qualche motivo; è ancora lì (per ora) e fa il lavoro:

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

Con delegate() (documenti) , lo si assegna a un contenitore e il primo argomento è l’elemento che deve triggersre l’evento.

Inoltre, .delegate() accetta solo una funzione, quindi per l’evento hover è necessario testare event.type per determinare show() (docs) o hide() (docs) .

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

Per mostrare / hide, un modo più breve per scrivere questo è usare toggle() (docs) , che può accettare un argomento switch dove true significa show e false significa hide :

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

Si noti che l’evento mouseenter è riportato da jQuery 1.4.3 . Se stai usando 1.4.2 , verrà segnalato come mouseover .


MODIFICARE:

Se capisco i tuoi commenti qui sotto, avresti qualcosa di simile (usando i selettori appropriati, ovviamente).

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

So che l’OP voleva una soluzione delegate (così ero io quando ho incontrato questa domanda …)

Ma dopo ulteriori indagini ho scoperto che è ansible ottenere lo stesso senza il codice js / jquery

Tutto ciò di cui hai bisogno è un po ‘di CSS

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

INMO è una soluzione molto più efficiente / illuminata

.delegate() non ha una maniglia. Inoltre, è necessario specificare l’elemento che si sta targeting con il primo parametro.

Potresti provare qualcosa come questo, tuttavia:

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

EDIT: disinformazione rimossa.

Se si desidera utilizzare il metodo hover() senza delega, il codice di lavoro sarà simile al seguente:

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

In secondo luogo, delegate è assegnare un gestore di eventi a un figlio, quindi è necessario specificare prima un selettore. Se è necessario assicurarsi che questo gestore di eventi esista per gli elementi aggiunti dynamicmente, preferirei .live() in questo caso con mouseenter e mouseleave .

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