Question

我知道正在询问类似的问题（比如here）但是，作为一个jQuery noob，我仍然无法将点击监听器附加到a所在的li元素中整个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

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

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

供参考，jQuery.on

Answer 2

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

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

Answer 3

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

$(document).on('click', '.user', (function () {
  console.log('user clicked:', this.id);
}));

<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>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>

监听器直接绑定到类的文档，因此现在很容易在整个文档中动态地重用该类。

如何使用jQuery将click侦听器附加到动态创建的子元素？

3 个答案: