Почему не срабатывает скрипт jquery?

Question

[MFNIK]

Есть скрипт, но не работает клик по кнопке close-panel

$(document).ready(function(){
	$('.add').on('click', function(event){ кликаем на блок add-caption, и добавляем класс active
		$('.add-caption').addClass('active');
	});
	$('.close-panel').on('click', function(event){ на блок close-panel, и удаляем класс active
		$('.add-caption').removeClass('active');
	});
});

Вот html код

<div class="add add-company-1">
              <span class="animate pulse-before"></span>
              <span class="animate pulse-after"></span>
              <div class="add-caption">
                <span class="close-panel">&times;</span>
              </div>
            </div>

Answer 1

[0xD34F]

Останавливайте всплытие события при клике на .close-panel, чтобы только что удалённый класс не добавлялся обратно (при обработке события в родительском элементе):

$('.close-panel').on('click', function(e) {
  e.stopPropagation();
  $('.add-caption').removeClass('active');
});

Или, уберите отдельный обработчик клика по .close-panel, а в обработчике клика по .add добавляйте или убирайте класс в зависимости от того, откуда пришло событие:

$('.add').on('click', function(e) {
  $('.add-caption').toggleClass('active', !$(e.target).hasClass('close-panel'));
});

Comments

[MFNIK]

Спасибо, решение помогло!
Раньше вроде бы такого не было, почему добавляется обратно то? Логику ни как не пойму.
1) Клик мы добавили класс
2) Клик мы удалили класс
Почему на 2 событии он опять добавляется, ведь removeClass - удалить!

[0xD34F]

MFNIK, я вроде бы написал, почему. Не поняли? Ну так погуглите "всплытие событий".

[MFNIK]

0xD34F, Да это мысли в слух прост

Answer 2

[Froggyweb]

event.stopPropagation(); // Отмена всплытия

добавь после
$('.close-panel').on('click', function(event){

ну и почитай про всплытие событий :)

Comments

[MFNIK]

Ну понятно что можно почитать, хотя по мне как то не логично))
А как сделать что бы класс присваивался только родителю, а не всем элементам с классом .add-caption??

[Froggyweb]

Логично тк твой спан внутри блока на котором висит событие.

$(this').parent('.add')

[MFNIK]

Froggyweb, че то не работает ни фига

$(document).ready(function(){
	$('.add').on('click', function(event){
		$(this).parent('.add').addClass('active');
	});
	$('.close-panel').on('click', function(event){
		event.stopPropagation();
		$(this).parent('.add').removeClass('active');
	});
});

[MFNIK]

Froggyweb, или так

$(document).ready(function(){
	$('.add').on('click', function(event){
		$(this).parent('.add');
			$('.add-caption').addClass('active');
	});
	$('.close-panel').on('click', function(event){
		event.stopPropagation();
		$(this).parent('.add');
			$('.add-caption').removeClass('active');
	});
});

[MFNIK]

Froggyweb, Можете показать как правильно будет?

[Froggyweb]

MFNIK, https://codepen.io/anon/pen/BEvydR

Answer 3

[Stimulate]

$('.close-panel').on('click', function(event){ 
    $('.add-caption').toggleClass('active');
  });

Comments

[MFNIK]

Так не работает, потому что при нажатии на всплывающую панель, она тоже закрывается, а мне нужно что бы только на крестик.

[Stimulate]

MFNIK, конкретный вопрос - конкретный ответ