Cannot add class to the elements created dynamically

Question

I'd like to create basic remove and delete with jquery. But I have a problem with jquery append, why I cannot addClass active on new <li> when I click append.

when I click <li> it will be adding class active on <li>, and then I want to remove <li> has class active

Can anyone help me why this is happen

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

You have to use event delegation for elements which were added dynamically.

You should bind click event handler using .on() method.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Read more about event delegation 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>

Answer 2

Change the following:

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

To

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

because $("ul.appendWrap li").click(function(){}); works for static html and you are adding html dynamically.