jquery не селектор не работает должным образом

#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(){}) поскольку вы, вероятно, манипулируете dom

3. Джон, ваше решение работает, спасибо! Возможно, оставьте комментарий, чтобы принять ваш ответ. В любом случае, можете ли вы описать, почему $(document) это работает?

4. Это потому, что вы добавляете active класс во время выполнения. Это не относится к элементам при загрузке DOM и привязке обработчика событий. Предложение Джона работает, потому что это делегированный обработчик событий