Search code examples
jquerymouseenter

JQuery mouseenter event parent / child relationship

I have an issue where I want every DIV on my page to receive an event when moused over. I've setup on an on() event handler that works great 99% of the time. However, I finding that the event starts to get confused due to parent / child node handling. Meaning, when I have a child DIV inside a parent DIV, the event fires for one, but not the other. Just moving the mouse in and out of the child to it's parent fails to update the call.

How do I solve for the chicken before the egg thing?

<div id="div-1">
    <div id="div-2"></div>
</div>

Once inside div-2, I sometimes can't get it to fire div-1 UNLESS I move the event handler OUTSIDE the div-1 container.

Thank you in advance.

Solution

  • Define your event assignment like this for all divs in your jQuerycode and it should work for all static and dynamically generated div in your HTML markup:

    $(document).on("mouseover","div", function() {
    // your function or style comes here
});

    Check out a working example HERE