使用 $.click() 动态插入的 DOM 元素不可点击答案

【问题标题】：Dynamically Inserted DOM Elements are not Clickable using $.click()使用 $.click() 动态插入的 DOM 元素不可点击
【发布时间】：2011-01-25 15:25:32
【问题描述】：

我正在使用 jQuery 获取表单元素的值并将其放置在列表项标记中。列表项的最大值为三个（这些将成为图像的标签）。

问题是我希望人们能够通过单击它们来删除他们输入的任何错误标签，但是这些项目（使用 jQuery 动态插入到

标记中）是不可点击的：

$('li.tag').click(function(){ /* Do stuff here */ });

它甚至不会触发警报。

有没有人知道如何解决这个问题？

【问题讨论】：

你什么时候调用.click()？

标签： jquery html css dynamic

【解决方案1】：

使用live 或liveQuery 插件。

【讨论】：

【解决方案2】：

我认为您正在寻找 live 方法： http://api.jquery.com/live/

也许你可以做一些类似的事情

$('li.tag').live('click', function() { /* Do stuff here */ });

【讨论】：

和 .on() 在 jQuery >= 1.9

【解决方案3】：

正如@vmassuchetto 提到的，自从 jQuery 1.7 .live() 在 1.9 中被完全弃用和删除。现在你应该使用 .on()。像这样：

$('li').on('click', '.tag', function() {
    ...
});

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

“委托事件的优点是它们可以处理来自以后添加到文档中的后代元素。经过选择一个保证在该时间存在的元素附加了委托事件处理程序，您可以使用委托事件避免频繁附加和删除事件处理程序的需要。”

【讨论】：