Perché il passaggio del mouse non funziona nei gestori di eventi delegati?

Question

Sto aggiungendo alcuni elementi dinamicamente e assegnando una proprietà hover ad esso in gestori di eventi delegati per i quali ho usato sotto il codice e non ha funzionato.

$(document).on("hover", ".sec_close_fast", function() { 
    $(this).parent('div').parent('div').css("border", "3px solid #000000"); 
}); 

poi ho usato mouseover e ha funzionato:

$(document).on("mouseover", ".sec_close_fast", function() { 
    $(this).parent('div').parent('div').css("border", "3px solid #000000"); 
}); 

Vorrei sapere perché hover non funziona, eppure mouseover fa.

Answer 1

La funzione/evento .hover non è in realtà un evento, ma solo una scorciatoia per mouseenter e mouseleave. Dal docs:

Il metodo .hover() lega gestori per entrambi mouseenter e mouseleave eventi. Puoi usarlo per applicare semplicemente il comportamento a un elemento durante il tempo in cui il mouse si trova all'interno dell'elemento.

Quindi non è possibile utilizzarlo per "delegare" gli eventi.

Soluzione

Come si è già accennato e come è menzionato nei documenti, è possibile utilizzare:

$(static_parent).on("mouseenter mouseleave", element, function (e) { 
    if (e.type == "mouseenter") { 
    // check if it is mouseenter, do something 
    } else { 
    // if not, mouseleave, do something 
    } 
});