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

jquery how to access events on html that was inserted to the DOM

本文关键字：DOM html 事件 插入 何访问 访问 jquery      更新时间：2023-09-26

在我的web应用程序中，我有一个加载时出现的15个项目的无序列表。我正在使用ajax从API抓取100个新项目，并通过使用.append(html)将它们添加到当前的ul。每个li旁边都有一个复选框，当被选中时需要调用some_function。

已呈现的元素可以访问some_function，但不能访问新加载的元素。我如何访问some_function上新加载的ajax项目?我以前从未处理过这个问题，显然因为项目没有"渲染"，但他们不能访问功能?

没有看到你的代码，我猜你已经绑定了一个事件处理程序直接到复选框

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

要在处理程序创建后添加内容时实现此功能，您需要使用委托处理程序，该处理程序绑定到较低级别的未更改元素，并将事件弹出到复选框中。我已经使用了document，但最好将其绑定到更上面的dom节点，最有可能的是添加复选框的ul。

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

这是一个可以使用jQuery on()函数的好地方

你可以在这里阅读更多信息

使用事件委派- 

$(document).on('change',".YourInputClass", some_function);
http://api.jquery.com/on/

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

下面是伪代码， 
$('ul').on('click', '.checkbox', function () {
   some_function.call(this); //maintain the context if it is an external function.
});

您需要delegate the events.

如果<div id="div1"></div>是一个动态注入的元素，并且你想要附加click事件

$('staticContainer').on('click', '#div1', some_function);
相关文章：