Question

我想用jquery创建基本删除和删除。但我有一个jquery追加问题，为什么我不能在新的＆lt; li＆gt;上添加addClass当我点击追加。

当我点击＆lt; li＆gt;它将在＆lt; li＆gt;上添加类激活，然后我想删除＆lt; li＆gt;有活跃的课程

任何人都可以帮助我，为什么会发生这种情况

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

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

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

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

详细了解event delegation here。

＆＃13;

$(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');
  })
  
});

＆＃13;

li, a {
  cursor: pointer;
}

.active {
  color: red;
}

＆＃13;

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

＆＃13;

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');
});

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

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

4 个答案: