无法将类添加到动态创建的元素答案

【问题标题】：Cannot add class to the elements created dynamically无法将类添加到动态创建的元素
【发布时间】：2017-06-25 20:49:51
【问题描述】：

我想用 jquery 创建基本的删除和删除。但是我有一个 jquery append 的问题，为什么当我点击 append 时我不能 addClass 在 new

上处于活动状态。

当我单击

时，它将在

上添加活动类，然后我想删除

类活动

谁能帮我解释一下为什么会这样

$(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>

【问题讨论】：

标签： javascript jquery html css append

【解决方案1】：

您必须对添加的元素使用event 委托dynamically。

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

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

阅读更多关于event delegationhere的信息。

$(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>

【讨论】：

【解决方案2】：

更改以下内容：

$("ul.appendWrap li").click(function(){
    $(this).addClass('active');
});

到

$(document).on('click',"ul.appendWrap li",function(){
    $(this).addClass('active');
});

因为 $("ul.appendWrap li").click(function(){}); 适用于静态 html，而您正在动态添加 html。

【讨论】：

【解决方案3】：

如果您的页面动态创建元素，您可以将事件绑定到已经存在的父级，通常是文档。

$(document).on('click',"ul.appendWrap li",function() {
    $(this).addClass('active');
});

【讨论】：

【解决方案4】：

您要附加的元素在定义的点击功能中不存在。要修复它，您可以使用 jQuery 中的 delegate() 方法。

$(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").delegate('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>

【讨论】：