Javascript jquery.mouseenter（）jquery.mouseleave（）和子元素存在问题

我的问题是，容器的子容器（ren）：

quint-…

，

mark-…

，

seal-…

，

glyph-…

不响应

.mouseenter（）

或

mouseleave（）

以下是我正在从事的一个项目的代码，是的-传奇联盟相关内容：

HTML:

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

我的工作原理，在左侧单击生成的符文统计信息之一，它将

在右侧
容器中添加一个div。然后，如果要尝试将鼠标悬停在右侧附加的容器上，请检查控制台以查看是否出现
enter
。如果没有，那就是我的问题。
试着在这个上下文中使用

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

@赛扬烤面包机：）很高兴能帮忙。！
$(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);
    });
});

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

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