javascript - jquery如何访问插入到DOM的html上的事件

Question

在我的网络应用程序中，我有一个加载时显示的 15 个项目的无序列表。我使用 ajax 从 API 中获取 100 个新项目，并使用 .append(html) 将它们添加到当前的 ul 中。每个 li 旁边都有一个复选框，选中后需要调用 some_function。

已渲染的元素可以访问some_function，但不能访问新加载的元素。如何访问新加载的 ajax 项目上的 some_function ？我以前从未处理过这个问题，显然因为这些项目没有“渲染”，但它们无法访问功能？

Answer 1

没有看到您的代码，我猜测您已将事件处理程序直接绑定(bind)到复选框

$('input[type="checkbox"]').click(function(event) {
    // Your code
});

要使此功能与创建处理程序后添加的内容一起使用，您需要使用委托(delegate)处理程序，该处理程序绑定(bind)到较低级别、未更改的元素并将事件冒泡到复选框。我已经使用了 document，不过建议将其绑定(bind)到更上方的 dom 节点，很可能是添加复选框的 ul。

$(document).on('click', 'input[type="checkbox"]', function(event) {
    // Your code
});