阻止删除在准备就绪的文档上分配的处理程序

Prevent handlers assigned on document ready from being removed

本文关键字：分配 处理 程序 文档 删除 准备就绪      更新时间：2023-09-26

在页面加载时，我正在生成几个跨度并将其附加到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的内容后删除所有处理程序。如何防止已分配的处理程序被删除？

这是因为您正在将单击处理程序分配到已添加到#grid的span元素上。清除#grid时，也会删除span，因此会丢失单击处理程序。一旦创建了另一个span，您就必须重新分配处理程序，或者使用与未删除的元素绑定的备用处理程序（如#grid）：

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

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

相关文章：