javascript - 无法向动态创建的元素添加类

Question

我想用 jquery 创建基本的移除和删除。 但是我在使用 jquery append 时遇到了问题，为什么当我单击 append 时我无法在新的

上激活 addClass。

当我点击

时，它会在

上添加 class active，然后我想删除

has class active

谁能帮我看看为什么会这样

$(document).ready(function(){
  
  var list=$('ul.appendWrap > li').length;
  
  $('.btn_append').click(function(){
      $('ul.appendWrap').append('<li>new</li>');   
  });
  
  $('.btn_remove').click(function(){
    $('li.active').remove();
  });
  
  $("ul.appendWrap li").click(function(){
    $(this).addClass('active');
  })
  
});

li, a {
  cursor: pointer;
}

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="appendWrap">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<a class="btn_append">append</a>
<a class="btn_remove">remove</a>

Answer 1

对于动态添加的元素，您必须使用事件委托(delegate)。

您应该使用 .on() 方法绑定(bind) click 事件处理程序。

事件委托(delegate)允许我们将单个事件监听器 append 到父元素，该事件监听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

阅读有关事件委托(delegate)的更多信息 here .

$(document).ready(function(){
  
  var list=$('ul.appendWrap > li').length;
  
  $('.btn_append').click(function(){
      $('ul.appendWrap').append('<li>new</li>');   
  });
  
  $('.btn_remove').click(function(){
    $('li.active').remove();
  });
  
  $(document).on("click","ul.appendWrap li",function(){
    $(this).addClass('active');
  })
  
});

li, a {
  cursor: pointer;
}

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="appendWrap">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<a class="btn_append">append</a>
<a class="btn_remove">remove</a>