Why is the class not being added?

Question

JavaScript

Hello
My code - Fiddle

Using carouselbootstrap 3

$('.carousel-indicators li').click(function(e) {
  e.stopPropagation();
  $('.carousel').carousel($(this).data('slide-to') - 1);
});

// change the indicator background on click
$('.carousel-indicators  li').on("click", function() {
  $('.carousel-indicators li.active').removeClass("active");
  $(this).addClass("active");
});
$('.carousel').bind('slid', function() {

  $('.carousel-indicators .active').removeClass('active');
  var activeIndex = $('.carousel .item.active').index();
  $('.carousel-indicators li:eq(' + activeIndex + ')').addClass('active');
});

I can not understand why the class is not correctly added .activeto acc. slide
To indicators resp. class is added

Answer 1

If I'm not mistaken, then you have $(this) points to the click event, and not to the element that was clicked, try this:

$('.carousel-indicators  li').each(function(){
    var li=$(this);
    li.on("click", function () {
        $('.carousel-indicators li.active').removeClass("active");
        li.addClass("active");
    });
});