issues with jquery.mouseenter() jquery.mouseleave() and child elements

Question

My issue, is that the child(ren) of the containers: quint-... , mark-... , seal-... , glyph-... don't respond to .mouseenter() or .mouseleave() .

Here's the code for a project I am working on, yes - league of legends related content:

HTML:

<table class="runes left">
</table>
<div class="rune-calc right">
    <div class="quint-container"></div>
    <div class="mark-container"></div>
    <div class="seal-container"></div>
    <div class="glyph-container"></div>
</div>

CSS:

html, body {
    height:100%;
    background-color:#F7F7F7;
    background-size:cover;
    background-repeat:none;
    background-position:center;
}
* {
    margin:0;
    padding:0;
    font-size:12px;
    font-weight:400;
}
* .left {float:left;}
* .right {float:right;}
* .center {margin:auto auto;}
* a {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    text-decoration:none;
    color:inherit;
}
img, p {cursor:default;}

table.runes {
    width:300px;
    border-collapse: collapse;
}
    table.runes tr:nth-child(odd) {
        background: -webkit-linear-gradient(#F7F7F7, #FFF); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#F7F7F7, #FFF); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#F7F7F7, #FFF); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#F7F7F7, #FFF); /* Standard syntax */
        border:1px solid rgba(204,204,204,0.5);
        border-bottom:none;
    }
    table.runes tr:nth-child(even) {
        background:#FFF;
        border:1px solid rgba(204,204,204,0.5);
        border-top:none;
    }
    table.runes tr td:nth-child(2) {padding-left:5px;}
    table.runes tr td.index ,
    table.runes tr td.type {display:none;}
    table.runes tr td.icon {cursor:pointer;}
    table.runes tr td.entry-name {
        font-weight:bold;
        cursor:pointer;
    }
    table.runes tr td.entry-desc {
        padding-bottom:5px;
        font-style:italic;
        cursor:default;
    }
    table.runes tr td.entry-name,
    table.runes tr td.entry-desc {
        padding-left:5px;
        padding-right:5px;
    }
div.rune-calc {
    width:calc(100% - 362px);
    min-height:10px;
    margin:25px 25px 0;
    padding:5px;
    background:#FFF;
    border:1px solid rgba(204,204,204,0.5);
}
    div.rune-calc div.quint-container,
    div.rune-calc div.mark-container,
    div.rune-calc div.seal-container,
    div.rune-calc div.glyph-container {
        display:inline-block;
        padding:5px;
    }
    div.rune-calc div.rune {
        width:48px;
        height:48px;
        background:red !important;
    }

jQuery:

$(document).ready(function() {
    //create table
    $.getJSON("http://ddragon.leagueoflegends.com/cdn/4.14.2/data/en_US/rune.json", function(response){
        console.log(response.data);
        $.each(response.data, function (index, entry) {
            var $name = entry.name;
            var type = NaN;
            if($name.indexOf('mark') != -1 || $name.indexOf('Mark') != -1) {
                type = "Mark";
            } else if($name.indexOf('seal') != -1 || $name.indexOf('Seal') != -1) {
                type = "Seal";
            } else if($name.indexOf('glyph') != -1 || $name.indexOf('Glyph') != -1) {
                type = "Glyph";
            } else if($name.indexOf('quint') != -1 || $name.indexOf('Quint') != -1) {
                type = "Quint";
            };
            $('table.runes').append('<tr><td class="index">'
                    +index+ '</td><td class="type">'
                    +type+ '</td><td class="icon"> \
                    <div style="width:48px;height:48px;background:url(./assets/runes/rune0.png) -' +entry.image.x+ 'px -' +entry.image.y+ 'px no-repeat"> \
                    </div></td><td class="entry-name">'
                    +entry.name+ '</td></tr> \
                    <tr><td></td><td class="entry-desc">'
                    +entry.description+ '</td></tr>'
                );
        });
    });

    //append runes
    jQuery("body").on("click", "td", function() {
        if($(this).is('td.entry-name') || $(this).is('td.icon')) {
            var getText = $(this).siblings('td.index').text();
            var getType = $(this).siblings('td.type').text();
            console.log(getText); //ID Check
            $.getJSON("http://ddragon.leagueoflegends.com/cdn/4.14.2/data/en_US/rune.json", function(response){
                $.each(response.data, function (index, entry) {
                    if(index == getText) {
                        console.log(entry.name); //Name Check
                        if(getType == "Mark") {
                            $('div.mark-container').append('\
                                <div class="rune" \
                                style="background:url(./assets/runes/rune0.png) -' +entry.image.x+ 'px -' +entry.image.y+ 'px no-repeat"></div>');
                        } else if(getType == "Seal") {
                            $('div.seal-container').append('\
                                <div class="rune" \
                                style="background:url(./assets/runes/rune0.png) -' +entry.image.x+ 'px -' +entry.image.y+ 'px no-repeat"></div>');
                        } else if(getType == "Glyph") {
                            $('div.glyph-container').append('\
                                <div class="rune" \
                                style="background:url(./assets/runes/rune0.png) -' +entry.image.x+ 'px -' +entry.image.y+ 'px no-repeat"></div>');
                        } else if(getType == "Quint") {
                            $('div.quint-container').append('\
                                <div class="rune" \
                                style="background:url(./assets/runes/rune0.png) -' +entry.image.x+ 'px -' +entry.image.y+ 'px no-repeat"></div>');
                        }
                    };
                });
            });
        };
    });

    //tooltips
    $("div.rune")
        .mouseenter(function() {console.log('enter')})
        .mouseleave(function() {});

    //scrolling container
    $(document).scroll(function() {
        var fromTop = $(window).scrollTop() + 25;
        $('.rune-calc').animate({
            marginTop: fromTop + 'px'
        }, 100);
    });
});

The Issue:

//tooltips
$("div.rune")
    .mouseenter(function() {console.log('enter')})
    .mouseleave(function() {});

How my DEMO works, on the left side click one of the generated rune stats and it'll append a div to the right container . Then you want to attempt to hover over the appended container to the right, check the console to see if enter appears. If not, that's my issue.

Answer 1

Try to use event-delegation at this context,

$("div.rune-calc").on("mouseenter", "div.rune", function () {
    console.log('enter')
}).on("mouseleave", "div.rune", function () {
    console.log('leave')
});

DEMO