Question

My $（“。grid”）。在按下我的新按钮后，mouseenter不会运行，该按钮会删除旧的div（.grid）并创建新的div。那么，我可以改变什么才能让它在那之后发挥作用。另外，为什么在.grid divs上面都有空格？

$(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>

Answer 1

替换：

$(".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元素上以将空间大小缩小为空。

＆＃13;

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

＆＃13;

* { 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;
}

＆＃13;

<!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>

＆＃13;

我也冒昧地为你清理了一些javascript。

Answer 2

您需要使用事件委派来处理动态创建的元素

$("#surface").on('mouseenter','.grid',function(){
     $(this).addClass("hovered");
});

---> https://learn.jquery.com/events/event-delegation/

Answer 3

它不起作用，因为在将操作附加到它之后创建了div，因此您必须使用以下语句之一：

示例1：

$("body").on('mouseenter','.grid',function(){
     $(this).addClass("hovered");
})

http://api.jquery.com/on/

示例2：

$("body").live('mouseenter','.grid',function(){
     $(this).addClass("hovered");
})

http://api.jquery.com/live/

示例3：

$("body").delegate('mouseenter','.grid',function(){
     $(this).addClass("hovered");
})

http://api.jquery.com/delegate/

$（“。grid”）。创建新div后，mouseenter不会运行

3 个答案: