¿jQuery tiene un control para .delegate ('hover')?

Question

Estoy tratando de usar:

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

Answer 1

La gran respuesta de User113716 ya no funcionará en jQuery 1.9+, porque el pseudo-evento hover ya no se admite (upgrade guide).

También desde jQuery 3.0delegate() para eventos de unión es obsoleto oficialmente, así que por favor utilice la nueva on()^(docs) a todos los efectos vinculantes de eventos.

Puede migrar fácilmente solución user113716 's mediante la sustitución de hover con mouseenter mouseleave y el cambio a la sintaxis on():

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

Si su problema es más complejo que una simple toggle, sugiero que vincule a dos eventos separados :

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

NB: Desde hover se eliminó en v1.9 y on() se introdujo en v1.7, no hay una necesidad real de una solución usando delegate() - pero si le gusta por alguna razón; todavía está allí (por ahora) y hace el trabajo:

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

Answer 2

Con delegate()^(docs), lo ha asignado a un contenedor, y el primer argumento es el elemento que debe activar el evento.

Además, .delegate() acepta sólo una función, por lo que para el caso de hover necesita probar la event.type para determinar show()^(docs) o hide()^(docs).

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

Para mostrar/ocultar, un camino más corto para escribir esto es utilizar toggle()^(docs), que puede aceptar una argumento interruptor donde true significa show y false significa hide:

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

Tenga en cuenta que el evento mouseenter se informó a partir del jQuery 1.4.3. Si usa 1.4.2, se informará como mouseover.

---

EDIT:

Si estoy entendiendo sus comentarios a continuación, usted tendría algo como esto (utilizando los selectores apropiados, por supuesto).

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

Answer 3

.delegate() no tiene un asa. Además, necesita especificar el elemento al que se dirige con el primer parámetro.

Usted podría intentar algo como esto, sin embargo:

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

Answer 4

EDIT: información errónea eliminado.

Si desea utilizar el método hover() sin delegación, código de trabajo se vería así:

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

En segundo lugar, delegate es asignar un controlador de eventos a un niño, por lo que es necesario que especifique una selector primero. Si necesita asegurarse de que este controlador de eventos exista para elementos añadidos dinámicamente, preferiría .live() en este caso con mouseenter y mouseleave.

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

Answer 5

sé el PO quería una solución delegate (así estaba yo cuando me encontré con esta pregunta ...)

Pero después de más investigación descubrí su posible lograr lo mismo sin JS/jQuery código en absoluto

Todo

lo que necesita es un poco de CSS

.someContainer .seconddiv{ 
    display : none; 
} 

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

INMO es una solución mucho más eficiente/luminosa.