javascript - 如何使用 jQuery 将点击监听器附加到动态创建的子元素？

Question

我知道有人问了类似的问题(比如 here )但是，作为一个 jQuery 菜鸟，我仍然无法将点击监听器附加到 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>

这是我尝试过的一个(众多)jQuery 函数:

$('#users-col ul.li.a').on('click', '.user', (function () {
  console.log('user clicked:', this.id); 
});

我该如何解决这个问题？

Answer 1

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

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

供引用，jQuery.on