javascript - issues with jquery.mouseenter() jquery.mouseleave() and child elements -
my issue, child(ren) of containers: quint-...,mark-...,seal-...,glyph-... don't respond .mouseenter() or .mouseleave().
here's code project 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;} * { 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); /* safari 5.1 6.0 */ background: -o-linear-gradient(#f7f7f7, #fff); /* opera 11.1 12.0 */ background: -moz-linear-gradient(#f7f7f7, #fff); /* firefox 3.6 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 demo works, on left side click 1 of generated rune stats , it'll append div right container. want attempt hover on appended container right, check console see if enter appears. if not, that's issue.
try use event-delegation @ context,
$("div.rune-calc").on("mouseenter", "div.rune", function () { console.log('enter') }).on("mouseleave", "div.rune", function () { console.log('leave') }); 
Comments
Post a Comment