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=".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>

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

4 Answers 4

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

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.

If your page was dynamically creating elements you would bind the event to a parent which already exists, often document.

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

The elements that you are appending do not exist in defined click-function. To fix it you may use delegate() method from jQuery.

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