Почему может не работать функция JS?

Question

[simpleasthat]

Здравствуйте.

Есть сайт на котором есть элементы .fa-bars и #menu-main-nav со следующими стилями:

i.fa-bars {
display: none;
}
#menu-main-nav {
display:block;
}
@media (max-width: 768px) {
#menu-main-nav {
display: none;
}
i.fa-bars {
display: inline-block;
}
}

Я пытаюсь выполнить следующий скрипт:

jQuery(document).on('click touchstart', '.fa-bars', function() {
jQuery("#menu-main-nav").prependTo(document.body)
jQuery("#menu-main-nav").show();
});

,однако, не срабатывает вообще ничего из того, что есть внутри функции. В консоли браузера никаких ошибок нет.

Пробовал воспроизвести то же самое в jsfiddle, всё работает, ссылка.
Пробовал использовать click(), результат такой же.

jQuery подключен, другие скрипты выполняются без проблем. Если запустить код jQuery("#menu-main-nav").prependTo(document.body)
из консоли браузера - он успешно выполнится.

Подскажите, пожалуйста, в какую сторону копать, ума не приложу почему скрипт в этом случае может не работать. Спасибо!

Answer 1

[Дмитрий]

хоть вы и пишете, что в консоли ошибок нет, попробуйте так:
1 оберните ваш код в что-то такое

(function($){
"use strict";
$(document).ready(function(){
// ваш код тут
});
// или тут ваш код
// и там и тут можно использовать '$' а не 'jQuery'
}(jQuery));

2 проверьте, не загружаете ли вы ваш код до подключения jquery.
и есть ли на момент выполнения кода #menu-main-nav
3 посмотрите, не висит ли у вас на .fa-bars еще какое-то событие, которое срабатывает первым

Comments

[simpleasthat]

Спасибо за ответ! Как уже написал в комментарии к другому посту, действительно, на нужный мне повесился еще один эвент (раскрытие меню), ради проверки повесил событие на другой селектор (".one") - теперь код выполняется. Подскажите, пожалуйста, каким образом можно заставить выполнятся оба события одновременно (если это возможно)?

[Дмитрий]

simpleasthat: можно переписать код например вот так
stackoverflow.com/questions/8608145/jquery-on-meth...

или можно все эти евенты засунуть в одну функцию
или засунуть вызов вашей функции в функцию, которая срабатывает первой
и тп

если не хотите переписывать js, добавьте к этому селектору еще один класс, и прицепитесь к нему

[simpleasthat]

dimasmagadan: Попробовал добавить к селектору еще один класс и привязаться к нему - не помогло, решил вызывать свою функцию внутри функции, которая срабатывает первая - все работает. Спасибо за помощь!

[Дмитрий]

simpleasthat: с добавлением класса, на самом деле, была не очень удачная идея. Про это неправильно написал.

Answer 2

[Дима Паутов]

Ну для начала, можно записать это короче))

$(document).on('click touchstart', '#trigger', function() {
      $("#a").appendTo(document.body).show();
  });

А дальше, сложно сказать, почему не работает у вас, а тут все ок. Дайте ссылку на вам сайт. Так будет проще понять

Answer 3

[Александр]

Небольшой kомментарий к коду. Если вы замечаете, что у вас в коде дублируются селекторы, выносите их в отдельные переменные и потом работайте с ними. Это упростит поддержку кода и обращение к переменной происходит быстрее, чем к селектору.
P.S. Дима Турков прав, используйте вызов методов по цепочке, это также упрощает код.

Comments

[simpleasthat]

Большое спасибо за совет, полностью с вами согласен.