我的问题是，容器的子容器：quint-...，mark-...，seal-...，glyph-...不响应{{1 }或.mouseenter()。
这里是我正在处理的项目的代码，是的 - 传说相关内容的联盟：
HTML：
.mouseleave()CSS：
<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>
jQuery的：
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;
}
问题：
$(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);
});
});
我的DEMO如何运作，在左侧点击生成的符文统计信息之一，然后//tooltips
$("div.rune")
.mouseenter(function() {console.log('enter')})
.mouseleave(function() {});
向右移动一个div {{1} }。然后，您想要尝试将鼠标悬停在右侧的附加容器上，检查控制台以查看是否显示append。如果没有，那就是我的问题。
答案 0 :(得分：0)
尝试在此背景下使用event-delegation，
$("div.rune-calc").on("mouseenter", "div.rune", function () {
console.log('enter')
}).on("mouseleave", "div.rune", function () {
console.log('leave')
});