@Samalamadoit

Почему когда нажимаю на кнопку класс не удаляется?

Когда нажимаю на кнопку класс "active-item-li" не удаляется.

У меня есть порядка 20 таких li, мне надо что бы по нажатию на li добавлялся класс 'active-item-li' , а по нажатию на button - удалялся. Однако класс добавляется, но не удаляется. В чем проблема?

jQuery(document).ready(function($) {

    $('.close-item-li').on('click', function() {
        $(this).parent().removeClass('active-item-li');
    })

    $('.type-product').on('click', function() {
        $(this).addClass('active-item-li');
    });
    
});


<li class="type-product active-item-li">

  <button class="close-item-li">x</button>

  <a href="#" class="link">ссылка</a>    
  
  <a>ссылка</a>  

</li>
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ответы на вопрос 3
Snova_s_vami
@Snova_s_vami
JavaScript ES5-8, TypeScript, Angular
Скорее всего дело в всплытии ивента, вам необходимо отменить всплытие при нажатии на кнопку внутри элемента li.
$('.type-product').on('click', function(event) {
     event.stopPropagation();   // Вот тут
     $(this).addClass('active-item-li');
});
Ответ написан
SpiderPigAndCat
@SpiderPigAndCat
занимаюсь салообразованием
смотри. ты поставил клик на li, и когда ты кликакшь на убрать ссылку, ты кликаешь не на кнопку, а на li
повесь добавление класса на отдельную кнопку
Ответ написан
jQuery(document).ready(function($) {

	$('.type-product').on('click', function() {
	    $(this).addClass('active-item-li');
	});

	$('.close-item-li').on('click', function(e) {
        e.stopPropagation();
        $(this).parent().removeClass('active-item-li');
    })
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы