如何使用jquery为动态附加元素添加点击事件？答案

【问题标题】：How to add click events for dynamically appended elements using jquery?如何使用jquery为动态附加元素添加点击事件？
【发布时间】：2016-03-19 20:37:57
【问题描述】：

在这里，我可以在单击时删除 box100 和 box200，但在将 box1-box5 添加到列表后无法删除它。如何选择附加的元素？

https://jsfiddle.net/uhmgj8ky/4/

html
  <ul>
  <li class='list'>remove box100</li>
  <li class='list'>remove box200</li>
  </ul>
  <div class='box' box='box1'>add box1</div>
  <div class='box' box='box2'>add box2</div>
  <div class='box' box='box3'>add box3</div>
  <div class='box' box='box4'>add box4</div>
  <div class='box' box='box5'>add box5</div>

css
.box{
  height:50px;
  width:50px;
  border:2px solid blue;
  display: inline-block;
}
ul li{
    height:50px;
  width:50px;
  border:2px solid blue;
  display: inline-block;
  margin-right: 1px;
}

jquery
$('.box').on('click', function(){
    var txt = $(this).attr('box');
    $('ul').append("<li class='list'>remove "+txt+"</li>");
});

$('.list').on('click', function(){
    $(this).remove();
});

【问题讨论】：

作为旁注，box 不是有效属性，您应该使用data-box

标签： jquery click event-delegation

【解决方案1】：

你应该使用事件委托

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。两者都
on()
和
delegate()
函数允许我们执行事件委托。

添加了一个容器类

 <ul>
  <li class='list'>remove box100</li>
  <li class='list'>remove box200</li>
  </ul>
<div class="box-container">
  <div class='box' box='box1'>add box1</div>
  <div class='box' box='box2'>add box2</div>
  <div class='box' box='box3'>add box3</div>
  <div class='box' box='box4'>add box4</div>
  <div class='box' box='box5'>add box5</div>
</div>

   $('.box-container').on('click',".box", function(){
     var txt = $(this).attr('box');
    $('ul').append("<li class='list'>remove "+txt+"</li>");
    });

     $('ul').on('click','.list', function(){
     $(this).remove();
     });

更新 https://jsfiddle.net/uhmgj8ky/6/

有关事件委托的更多信息，see video

【讨论】：