Question

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

2017-02-08

2636

javascript jquery html css append

我想使用 jquery 创建基本的移除和删除功能。但我使用 jquery append 时遇到问题，为什么单击 append 时无法在新的 <li> 上添加 class active。

当我单击 <li> 时，它会在 <li> 上添加 class active，然后我想删除具有 class active 的 <li>

有人能帮我解决为什么会发生这种情况吗

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

您必须对 动态 添加的元素使用 事件 委托。

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

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

在此处了解有关 事件委托 的更多信息。

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

Answer 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。

Answer 3

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

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