Почему такой код не проходит больше 1й итерации?

Question

Пилил табы на мобайл и уперся в проблему которую не могу решить, не понимаю что не так... Код срабатывает лишь единожды, что не так с моим условием? И как выбранный элемент переместить на позицию 1го, а все остальные показывать уже после?

codepen

$('.dosage-setter__tab.active').on('click', function(){
  $('.dosage-setter').addClass('change-tab');
  $('.dosage-setter__tab:not(.active)').on('click', function(){
    $(this).addClass('active');
    $('.dosage-setter').removeClass('change-tab');
  })
})

Answer 1

$('.dosage-setter__tab.active').on('click', function(){

Так ты же подписался на клик только по одному элементу, вот и работает клик только по нему. Подписывайся на всплытие на контейнере.

$('.dosage-setter').on('click', '.dosage-setter__tab.active', function () {

Answer 2

Я возможно не понимаю как конечный результат должен получится. Но вы сможете попробовать вот этот вариант для решения своей проблемы.

$('.dosage-setter__tab.active').click(function(){
  $('.dosage-setter').toggleClass('change-tab');
  $('.dosage-setter__tab:not(.active)').click( function(){
    $(this).addClass('active');
    $('.dosage-setter').toggleClass('change-tab');
  })
})

БЛОГ НА HUSL

Почему такой код не проходит больше 1й итерации?

Ответы (2 шт):