Почему не срабатывает удаление класса с помощью toggleClass?

Question

[Ярослав Александров]

Не могу понять почему не удаляется класс sb-search-open у элемента . Тестовая страница ivdela.ru/test.php. Сайт на Битриксе
Как можно отслеживать сработку/не сработку событий, есть ли инструменты для этого?
Код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
		<script type="text/javascript">
$(document).ready(function(){
$('#button-close').click(function(){
  $('#sb-search').toggleClass('sb-search-open');
});
}); 
</script>

Comments

[Анатолий Медведев]

https://learn.javascript.ru/debugging-chrome

[Ярослав Александров]

Спасибо, установлю себе.

Answer 1

[Алексей Уколов]

Если поставить брейкпоинт на изменение атрибутов тега #sb-search, то видно, что класс удаляется, а потом сразу ставится на место. Скорее всего, срабатывает обработчик клика, который открывает поле поиска изначально. Попробуйте добавить в свой обработчик stopPropagation().

Answer 2

[Lynn «Кофеман»]

Потому что вы забыли закрыть первый тег script

Comments

[Ярослав Александров]

Спасибо, при копировании пропустил, но закрытие тега не повлияет на сработку удаления класса

[Lynn «Кофеман»]

Ярослав Александров: повлияет. Сейчас браузер просто не видит вашего скрипта

Answer 3

[Денис]

Добавьте отмену всплытия события:

$(document).ready(function() {
    $('#button-close').click(function(e) {
        e.stopPropagation();
        $('#sb-search').toggleClass('sb-search-open');
    });
});

Answer 4

[Иван Кондратьев]

$(document).ready(function(){
$(document.body).on( 'click' , '#button-close' , function(){
  $('#sb-search').toggleClass('sb-search-open');
});
});

Comments

[Иван Кондратьев]

структуру HTML еще бы увидеть

[Ярослав Александров]

Иван спасибо, решение проблемы найдено