Как удалить класс блока при клике по его фону?

Question

[NeXan]

Всем привет! Уже час бьюсь над простой формулой.

jQuery(document).ready(function() {
		$('.search-submit').click(function(){
		$('.header-search').toggleClass('show');
		});
		if ($('.header-search').hasClass('show')) {
			$('#blog').click(function(){
			$('.header-search').removeClass('show');
			})
		}
	});

При клике на блок с классом header-search, к нему добавляется класс show, при повторном клике - удаляется. Но если кликать фону, пусть это будет body id="blog", то класс show не удаляется. Без условия if вторая часть кода работает, но при клике класс show добавляется и сразу удаляется, что логично. Тут проблема в условии. Если блок header-search имеет класс show, то при клике по body, удалить класс show в блоке header-search. Код конечно простецкий, но мне уже надоело рыть интернет, поэтому решил спросить)

Comments

[Kovalsky]

Ну во первых спасибо за красивый код, искать в неотформатированном коде закрывающие скобочки это всегда хорошая зарядка для глаз. Во вторых:

if ($('.header-search').hasClass('show')) {
      $('#blog').click(function(){
      $('.header-search').removeClass('show');
      })
    }

Это чо? Если у хэдера есть класс show, то вешаем обработчик клика на #blog? То есть если у хэдера нету этого класса, то обработчик не нужен получается?

[NeXan]

Kovalsky, да, все верно) Незачем обрабатывать blog, если нет класса show.

[Евгений Щербаков]

Это некорректное поведение. Обработчик сделайте сразу, а его действие по условию.
В ответах написал как.

Answer 1

[NeXan]

На самом деле рабочий код должен выглядеть так, нашел решение:

$(document).ready(function() {
		var search_submit = $(".search-submit");
		var search_form = $(".header-search");
		$(search_submit).click(function(){
			$(search_form).toggleClass('show');
		});
		$(document).mouseup(function (e){ // событие клика по веб-документу
			if (!search_form.is(e.target) && search_form.has(e.target).length === 0) { // если клик был не по нашему блоку и не по его дочерним элементам
				$(search_form).removeClass('show'); // скрываем его
			};
		});

	});

Answer 2

[Евгений Щербаков]

Надо навесить на #blog сразу обработчик click и внутри него проверяй условие.
Примерно так

$('#blog').click(function(){
   if ($('.header-search').hasClass('show')) {
      $('.header-search').removeClass('show');
   }
})

А то Вы вешаете обработчик только после срабатывания условия ($('.header-search').hasClass('show'))

Comments

[NeXan]

Так тоже не работает, вернее работает, но не так, как надо. Вот измененный код:

jQuery(document).ready(function() {
		$('.search-submit').click(function(){
			$('.header-search').toggleClass('show');
		});
		$('#blog').click(function(){
			if ($('.header-search').hasClass('show')) {
				$('.header-search').removeClass('show');
			}
		})
	});

То есть сейчас класс добавляется и сразу исчезает при одном клике на search-submit. Но если прописать класс вручную в панели разработчика и нажать на blog, то он удаляется :)

[Kovalsky]

Денис Валерьевич, "То есть сейчас класс добавляется и сразу исчезает при одном клике" - это должно неиллюзорно намекать на то, что у вас выполняются оба обработчика: сначала выполняется toggleClass добавляющий класс, потом выполняется removeClass. Выполняйте в каждом обработчики e.stopPropagation(), где e это первый аргумент переданный в функцию обработчик

Это всё есть в учебнике - https://learn.javascript.ru/bubbling-and-capturing

[Евгений Щербаков]

Kovalsky, да, Вы правы)

[NeXan]

Kovalsky, работает, вот код, но теперь при клике на форму поиска, окно исчазает. Стало быть надо добавлять еще одно условие, чтобы при клике по форме поиска, оно не исчезало)

$(document).ready(function() {
		$('.search-submit').click(function(e){
			e.stopPropagation();
			$('.header-search').toggleClass('show');
			
		});
		$('#blog').click(function(){
			if ($('.header-search').hasClass('show')) {
				$('.header-search').removeClass('show');
			}
		})
	});

P.S. На Arduino мне как то намного легче было учиться программировать, а здесь все как-то запутанно)