$(".grid").mouseenter在我创建新的div之后不运行
提问于 2015-05-15 08:50:17
我的$(".grid").mouseenter在我按下新按钮后不会运行，这个按钮会删除旧的div (.grid)并创建新的。那么，在那之后，我能改变什么来让它发挥作用呢？另外，为什么在所有的.grid div中都有空空间呢？
$(document).ready(function(){
createGrid();
$(".grid").mouseenter(function(){
$(this).addClass("hovered")
});
$("#new").click(function(){
clear();
createGrid(prompt("How big would you like your new grid to be (x<64)?"));
});
$("#clear").click(function(){
clear();
});
});
function clear(){
$(".grid").removeClass("hovered");
};
function gridSize(measuring, howBig){
if (howBig==null){
howBig = 16;
}
switch(measuring){
case "height":
return parseInt($("#surface").height()/howBig);
case "width":
return parseInt($("#surface").width()/howBig);
}
};
function createGrid(howBig){
$("#surface").empty();
if(howBig == null || howBig == ""){
for(var i=0; i < 16; i++){
$("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width')+"px ; height:"+gridSize('height')+ "px;'></div>");
for(var j=0; j < 15; j++){
$("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width')+"px ; height:"+gridSize('height')+ "px;'></div>");
}
}
}
else {
for(var i=0; i < howBig; i++){
$("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width', howBig)+"px ; height:"+gridSize('height', howBig)+ "px;'></div>");
for(var j=0; j < howBig-1; j++){
$("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width', howBig)+"px ; height:"+gridSize('height', howBig)+ "px;'></div>");
}
}
}
};* { margin:0; padding:0; }
.wrapper {
width: 800px;
margin: 0px auto;
}
#reset {
width: 60px;
margin : 15px auto;
}
#surface {
margin: 0px auto;
width: 800px;
height: 800px;
}
.grid {
background-color: #D3D3D3;
margin: 0px;
display: inline-block;
}
.hovered {
background-color: black;
}<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "css/styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src = "js/script.js"></script>
</head>
<body>
<div class = "wrapper">
<button id ="new">New</button>
<button id ="clear">Clear</button>
<div id = "surface"></div>
</div>
</body>
</html>
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-05-15 08:52:48
取代：
$(".grid").mouseenter(function(){
$(this).addClass("hovered")
});使用
$("#surface").on('mouseenter','.grid',function(){
$(this).addClass("hovered")
});这是必需的，因为原始代码将事件处理程序附加到.grid元素，删除并创建新元素(这些元素没有附加处理程序)。您可以在创建新元素时重新运行原始代码来附加新的处理程序，但是使用事件委托是一种更好的方法，因为您只在一个元素(#surface)上附加事件处理程序，而不是在每个单独的.grid元素上附加事件处理程序，当然，由于您没有删除和重新创建#surface元素，所以在创建新网格时不需要分离/重新附加它。
您可以在这里阅读有关jQuery的on方法和事件委托的更多信息：http://api.jquery.com/on/
至于间距问题，这是因为您正在使用内联块元素，如果元素之间存在内联元素，则内联元素将至少保留一个空格。您可以删除元素之间的所有空格(和换行符)，也可以将font-size:0;放置在#surface元素上，从而将空间大小缩小到零。
maxSize=16;
$(document).ready(function(){
createGrid(16);
$("#surface").on('mouseenter','div',function(){
$(this).addClass("hovered")
});
$("#new").click(function(){
createGrid(prompt("How big would you like your new grid to be (x<" + maxSize + ")?"));
});
$("#clear").click(function(){
$("#surface>div").removeClass("hovered");
});
});
function gridSize(measuring, howBig){
switch(measuring){
case "height":
return parseInt($("#surface").height()/howBig);
case "width":
return parseInt($("#surface").width()/howBig);
}
};
function createGrid(howBig){
howBig=parseInt(howBig);
if(howBig == NaN || howBig<1 || howBig>maxSize){
howBig=16;
}
$("#surface").empty();
for(var i=0; i < howBig*howBig; i++){
$("#surface").append("<div style='width:" +gridSize('width', howBig)+"px; height:"+gridSize('height', howBig)+ "px;'></div>");
}
};* { margin:0; padding:0; }
.wrapper {
width: 800px;
margin: 0 auto;
}
#reset {
width: 60px;
margin : 15px auto;
}
#surface {
margin: 0 auto;
width: 800px;
height: 800px;
font-size: 0;
}
#surface>div {
background-color: #D3D3D3;
margin: 0;
display: inline-block;
}
#surface>div.hovered {
background-color: black;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrapper">
<button id="new">New</button>
<button id="clear">Clear</button>
<div id="surface"></div>
</div>
</body>
</html>
我还冒昧地为您清理了一些javascript。
Stack Overflow用户
发布于 2015-05-15 08:53:47
您需要使用事件委托来处理动态创建的元素。
$("#surface").on('mouseenter','.grid',function(){
$(this).addClass("hovered");
});Stack Overflow用户
发布于 2015-05-15 09:00:49
它不能工作，因为在将操作附加到它之后创建的div必须使用以下语句之一：
示例1:
$("body").on('mouseenter','.grid',function(){
$(this).addClass("hovered");
})示例2:
$("body").live('mouseenter','.grid',function(){
$(this).addClass("hovered");
})示例3:
$("body").delegate('mouseenter','.grid',function(){
$(this).addClass("hovered");
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30264780
复制
腾讯云开发者
