#jquery
#jquery
Вопрос:
Я знаю, что были некоторые темы с аналогичной проблемой, но я не могу найти решение для решения моей проблемы. У меня есть 7 a
элементов. У них есть nav-link
item-element
классы, и один из них active
также class .
У меня есть скрипт, который выполнит некоторый метод, если будет нажат неактивный элемент. Мой скрипт:
$('a.nav-link.item-element').not('.active').click(function () {
console.log(result);
});
Моя проблема в том, что даже если я нажимаю на активный элемент, скрипт выполняет свою работу, поэтому not
свойство не работает, но если я вставлю первую строку выбора в консоль, все в порядке:
Итак, подводя итог: селектор not
работает, когда я проверяю его в консоли, но он не работает, когда я нажимаю на элемент.
Кто-нибудь знает, в чем может быть проблема?
##HTML
Я создал необработанный html, просто чтобы показать вам — я знаю, что это некрасиво, но это просто для теста:
<a class="nav-link item-element" href="#" id="test-element" data-toggle="pill" role="tab" aria-selected="false">element2</a>
<a class="nav-link item-element" href="#" id="test-element" data-toggle="pill" role="tab" aria-selected="false">element3</a>
<a class="nav-link item-element" href="#" id="test-element" data-toggle="pill" role="tab" aria-selected="false">element4</a>
<a class="nav-link item-element" href="#" id="test-element" data-toggle="pill" role="tab" aria-selected="false">element5</a>
<a class="nav-link item-element" href="#" id="test-element" data-toggle="pill" role="tab" aria-selected="false">element6</a>
<a class="nav-link item-element" href="#" id="test-element" data-toggle="pill" role="tab" aria-selected="false">element7</a>```
Комментарии:
1. Нам также нужно просмотреть HTML, чтобы мы могли создать рабочий пример проблемы
2. используйте:
$(document).on('click', 'a.nav-link.item-element:not(.active)', function(){})
поскольку вы, вероятно, манипулируете dom3. Джон, ваше решение работает, спасибо! Возможно, оставьте комментарий, чтобы принять ваш ответ. В любом случае, можете ли вы описать, почему
$(document)
это работает?4. Это потому, что вы добавляете
active
класс во время выполнения. Это не относится к элементам при загрузке DOM и привязке обработчика событий. Предложение Джона работает, потому что это делегированный обработчик событий