防止在文档就绪时分配的处理程序被删除

Question

我在页面加载时生成并向div添加几个跨度。

HTML结构如：

    <div id="holder">
        <div id="grid"></div>
    </div>

然后循环并将跨度追加到嵌套的div：

    $span = $('<span />').attr('class', 'colorSquare');
    $("#grid").append($span);

然后，我想点击一个按钮并重置（删除最初附加的跨度，因为我不想重新占用跨度）div中的内容：

    $("#holder > div").html("");

在div内的初始页面加载/初始生成跨度时，click事件处理程序已注册到document.ready上的div跨度，以下内容有效：

$("#grid span").click(function () { console.log("working"); }); 

但是，使用$("#holder > div").html("");重置后，点击处理程序无法正常工作。我假设这是因为处理程序仅在初始文档就绪时分配，但是我不希望在重置div的内容后删除所有处理程序。如何防止分配的处理程序被删除？

Answer 1

这是因为您将点击处理程序分配到已添加到span的{​​{1}}元素。清除#grid后，您还会删除#grid，因此会丢失点击处理程序。一旦创建了另一个span，您将不得不再次重新分配处理程序，或者使用与未被删除的元素绑定的备用处理程序（例如span）：< / p>

#grid

此替代方法使用jQuery的$('#grid').on('click', 'span', function() { console.log("working"); }); 方法，并将处理程序绑定到on元素。但是，第二个参数标记了您只关注点击#grid的子元素span元素。