javascript - 防止删除分配给文档就绪的处理程序

Question

我在页面加载时生成多个跨度并将其附加到 div。

HTML 结构如下:

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

然后循环遍历并将 span 附加到嵌套的 div:

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

然后，我想单击一个按钮并重置(删除最初附加的跨度，因为我不想重新附加跨度)div 内的内容:

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

在 div 内初始页面加载/初始生成 span 时，click 事件处理程序将在 document.ready 上注册到 div 的 span，并且执行以下操作:

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

但是，使用 $("#holder > div").html(""); 重置后，点击处理程序不起作用。我假设这是因为处理程序仅在初始文档准备好时分配，但我并不期望在重置 div 内容后所有处理程序都会被删除。如何防止分配的处理程序被删除？

Answer 1

这是因为您将点击处理程序分配给已添加到 #grid 的 span 元素。当您清除#grid时，您还会删除span，因此您会丢失点击处理程序。您要么必须在创建另一个 span 后立即重新分配处理程序，要么使用与未删除的元素绑定(bind)的备用处理程序(例如 #grid ):

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

此替代方案使用 jQuery 的 on 方法，并将处理程序绑定(bind)到 #grid 元素。但是，第二个参数标记您只关心单击 span 元素，这些元素是 #grid 的子元素。