javascript - Why hover does not work in delegated event handlers?

Question

I am adding some elements dynamically and assigning a hover property to it in delegated event handlers for which I used below code 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, yet mouseover does.

Answer 1

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

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

So you cannot use it to "delegate" events.

Solution

As you have already mentioned and as it is 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
  }
});