Question

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

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

Answer 1

这是一个很好的情况，你可以使用jQuery on()函数

您可以阅读更多相关信息here

Answer 2

使用事件委托 -

$(document).on('change',".YourInputClass", some_function);

Answer 3

您应该为这种情况使用事件委托。基本上，您将处理程序绑定到父元素，并通过选择器过滤掉以触发处理程序。

以下是伪代码

$('ul').on('click', '.checkbox', function () {
   some_function.call(this); //maintain the context if it is an external function.
});

Answer 4

您需要delegate the events.

如果<div id="div1"></div>是动态注入的元素，并且您想附加点击事件

$('staticContainer').on('click', '#div1', some_function);

Answer 5

在没有看到您的代码的情况下，我猜您已将事件处理程序直接绑定到复选框

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

要在创建处理程序之后添加内容来完成此工作，您需要使用委托处理程序绑定到较低级别的未更改元素，并将事件冒充到复选框。我使用了document虽然建议将它绑定到更远的dom节点，最有可能是添加了复选框的ul。

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