Javascript jqueryhover不是'；t在重新加载div后运行

我有一个函数，它创建一个div网格，当文档加载时，这些div被生成并发送到容器div。将鼠标悬停在div上时，它们会高亮显示（更改颜色）。我有另一个函数重置网格，允许用户指定网格的大小。它应该删除容器div中当前的div，并根据用户的输入将它们替换为div。据我所知，这是工作的预期。唯一不起作用的是网格重置后的悬停效果。任何帮助，或至少一些指导都将不胜感激。下面是我的JSFIDLE示例：

vard=（“”）；
函数createGrid（numSquares）{
变量面积=$（“#g#U面积”）；
var squareSize=Math.floor（area.innerWidth（）/numSquares）；
var n=0；
对于（变量i=0，len=（numSquares*numSquares）；i

每次清空容器时，这些方块的悬停处理程序也会丢失。因此，每次创建网格时，都必须设置处理程序

事件绑定到原始的

.square

组件，当您向DOM添加新组件时，事件不会自动绑定

要为动态生成的元素触发事件，您需要

重新绑定

.square.hover（）

事件，以便绑定新的方块

或

使用事件委派，例如

$（“#content”）.on（“hover”、“.square”、function（）{}

自动为您处理它

---

删除事件后，需要重新绑定它们

为了简化此操作，我将

$（'.square'）.hover（）移动到
createGrid
内部：

我改变了一些逻辑，现在它开始工作了


如果可以预测，请使用David Li的选项2。感谢您的回复和解释。这非常有帮助！感谢您的回复！感谢您花时间这么做，我非常感谢！我将链接更改为新的JFIDLE，我不小心将旧的链接放在了原来的位置。实际上，我手动更新了代码以进行测试。感谢您修复了链接。只是更新，清空div不会将div从容器中移除。最终发生的情况是，重置容器后发送到容器的div位于现有网格之上。如果重置网格的次数足够多，性能会明显下降。Tiago Garcia建议移动
$（'.square'）.hover（）
内部
createGrid（）
var d = ("<div class='square'></div>");

function createGrid(numSquares) {
    var area = $('#g_area');
    var squareSize = Math.floor(area.innerWidth() / numSquares);
    var n = 0;
    for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
        area.append(d);
    }


    $('.square').height(squareSize);
    $('.square').width(squareSize);
}

function resetGrid() {
    $(".square").remove();
}

$(document).ready(function () {
    createGrid(32);

    $('.square').hover(

    function () {
        $(this).css({
            'background-color': '#FFFFFF'
        });
    }, function () {
        $(this).css({
            'background-color': '#C8C8C8'
        });
    });
    $("#button").click(function () {
        var numSquares = prompt("Please enter the size");
        resetGrid(numSquares);
        createGrid(numSquares);
    });

});

var d = "<div class='square'></div>";

var len = numSquares * numSquares;
for (i = 0; i < len; i++) {
    area.append(d);
}

function resetGrid() {
    $(".square").empty();
}