Question

我有一个函数可以创建生成div的网格，并在文档加载时将其发送到容器div。当一个人盘旋在div上时，他们突出显示（改变颜色）。我有另一个重置网格的功能，允许用户指定网格的大小。它应该删除当前在容器div中的div，并根据用户的输入用div替换它们。据我所知，这是按预期工作的。不能工作的唯一事情是网格重置后的悬停效果。任何帮助，或至少某些方向将非常感激。这是我的jsfiddle示例：http://jsfiddle.net/psyonix/1g9p59bx/45/

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

});

Answer 1

您的事件绑定是针对原始.square.hover()组件的，当您向DOM添加新事件时，事件不会自动绑定。

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

重新绑定$("#content").on("hover", ".square", function(){}事件，以便新方格绑定，

或

使用事件委派（例如private: using B<T>::fn;）自动为您处理。

Answer 2

每次清空容器时，这些方块的悬停处理程序也会丢失。所以你必须在每次createGrid !!

时设置处理程序

Answer 3

删除后，您需要重新绑定事件。

为了简化这一过程，我将$('.square').hover()移至createGrid内部：

http://jsfiddle.net/1g9p59bx/46/

Answer 4

我改变了一些逻辑，现在它正在发挥作用。

https://jsfiddle.net/1g9p59bx/50/

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

-

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

- 最后!!使用函数empty（）而不是remove（）。 empty（）删除div中的所有内容而不是删除自身，然后，就不可能将事件绑定到不存在的元素（已被删除）

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

重新加载div后，jQuery悬停不起作用

4 个答案: