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>

Mihai Alexandru-Ionut · Accepted Answer · 2017-02-08T10:09:47.913

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>

score 2 · Answer 2 · answered Feb 08 '17 at 09:51

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.

score 2 · Answer 3 · answered Feb 08 '17 at 09:53

2

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

answered Feb 08 '17 at 09:53

Monzurul Shimul

8,132
2
28
42

Arthur Tsidkilov · Answer 4 · 2018-04-15T08:54:24.033

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

Cannot add class to the elements created dynamically

4 Answers4