Question

I have dynamically generated div tags which looks something like this:

<div class="widget widget_1">
    <div class="widget_header widget_header_1"></div>
    <div class="widget_sub_header widget_sub_header_1"></div>
    <div class="widget_content widget_content_1"></div>
    <div class="widget_footer widget_footer_1"></div>
<div>

<div class="widget widget_1">
    <div class="widget_header widget_header_1"></div>
    <div class="widget_sub_header widget_sub_header_1"></div>
    <div class="widget_content widget_content_1"></div>
    <div class="widget_footer widget_footer_1"></div>
<div>

<div class="widget widget_6">
    <div class="widget_header widget_header_6"></div>
    <div class="widget_sub_header widget_sub_header_6"></div>
    <div class="widget_content widget_content_6"></div>
    <div class="widget_footer widget_footer_6"></div>
<div>

These div tabs will be generated based on user selection, so I can’t know how many they will have on screen at once, all I will know is that they can have many of the same widgets on the screen and/or difference once on the screen at once.

I am trying to get a hover effect when hovering over any of these widgets. I tried the follow, but nothing happens when hovering over .widget.

$(".widget_content").on({
    mouseenter: function () {
        alert("enter");
    },
    mouseleave: function () {
        alert("leave");
    }
});

Any idea what I’m doing wrong?

Answer 1

If the elements are dynamically added, use delegated events approach:

$("body").on({
    mouseenter: function() {
        alert("enter");
    },
    mouseleave: function() {
        alert("leave");
    }
}, ".widget_content");

Here instead of body you may use any static parent element of .widget_content.