Why does the freeze not work in delegated event handlers?

Question

I add some elements dynamically and assign it the hover property in delegated event handlers, for which I used the code below, and it did not work.

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

Then I used mouseover and it worked:

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

I would like to know why hover does not work, but mouseover does.

Answer 1

The .hover function / event is not really an event, but just a shorthand for mouseenter and mouseleave . From docs :

The .hover() method binds handlers for mouseenter and mouseleave . You can use it to easily apply behavior to an element over the time that the mouse is inside the element.

Therefore, you cannot use it to delegate events.

Decision

As you mentioned and as mentioned in the docs, you can use:

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