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-08 10:09:47Z

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>

Mayank Pandeyz · Accepted Answer · 2017-02-08 09:51:23Z

3

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.

answered Feb 8, 2017 at 9:51

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Comments

Monzurul Shimul · Accepted Answer · 2017-02-08 09:53:06Z

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 8, 2017 at 9:53

Monzurul Shimul

8,4262 gold badges31 silver badges45 bronze badges

Comments

Arthur Tsidkilov · Accepted Answer · 2018-04-15 08:54:24Z

2

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>

edited Apr 15, 2018 at 8:54

answered Feb 8, 2017 at 10:01

Arthur Tsidkilov

5,4212 gold badges24 silver badges18 bronze badges

Collectives™ on Stack Overflow

Cannot add class to the elements created dynamically

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related