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

Question

在我的网络应用程序中，我有一个在加载时出现的 15 个项目的无序列表。我正在使用 ajax 从 API 中获取 100 个新项目，并ul使用.append(html). 每个li旁边都有一个复选框，选中时需要调用some_function.

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

Answer 1

这是一个很好的情况，您可以使用 jQueryon()函数

你可以在这里阅读更多关于它的信息

Answer 2

使用事件委托 -

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

http://api.jquery.com/on/

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
});