Javascript 如何使用jQuery将click listener附加到动态创建的子元素？

我知道有人问过类似的问题（比如），但作为一个jQuery noob，我仍然无法将单击侦听器附加到

li

中的

a

元素，其中整个

ul.li.a

动态地附加到DOM中，就像这样

<div id="users-col">
  <!-- dynamically appended --> 
  <ul id="users-list">
       <li>
          <a class="user" id="Alice">Alice</a>
       </li>
       <li>
          <a class="user" id="Bob">Bob</a>
       </li>
  </ul>
   <!-- END dynamically appended --> 
</div>

---

我怎样才能解决这个问题

您需要在可用的元素上绑定事件（不是动态添加的）

---

作为参考，

您需要在可用的元素上绑定事件（不是动态添加的）

---

作为参考，

在这种情况下，您必须将事件与动态创建的子项的父项挂钩：

$('#users-col').on('click', 'a.user',        (function () { 
console.log('click bound'); 
});

---

在这种情况下，必须将事件与动态创建的子事件的父事件挂钩：

$('#users-col').on('click', 'a.user',        (function () { 
console.log('click bound'); 
});

---

为了方便和重用，我将第一个字段直接绑定到文档：

$（文档）.on（'click'，'user'，（函数）（）{
console.log（'用户单击：'，此.id）；
}));



爱丽丝


上下快速移动


为了方便和重用，我将第一个字段直接绑定到文档：


$（文档）.on（'click'，'user'，（函数）（）{
console.log（'用户单击：'，此.id）；
}));



爱丽丝


上下快速移动


li
和
a
不是类，因此如果您试图选择它们，它们前面不应该有
。用
分隔元素以表示父子关系。我也尝试了
$（“#users col ul>li>a”）
，但失败了。@Karlom
$（“#users col ul>li>a”）
将不起作用，因为您的
ul
li
和
a
是动态创建的。
li
和
a
不是类，因此，如果您试图选择它们，它们前面不应该有
。用
分隔元素以表示父子关系。我也尝试过
$（“#users col ul>li>a”）
，但失败。@Karlom
$（“#users col ul>li>a”）
将不起作用，因为您的
ul
li
和
a
是动态创建的。我已经尝试过了。它的问题是，无论在页面上单击什么，它都会被触发。@Karlom否，它应该只对class=“user”标记触发。除非你的主体包含类user，否则它不会每次点击都触发。我已经试过了。它的问题是，无论在页面上单击什么，它都会被触发。@Karlom否，它应该只对class=“user”标记触发。除非您的主体包含类user，否则它不应该每次单击都触发。
$('#users-col').on('click', 'a.user',        (function () { 
console.log('click bound'); 
});