jQuery .on() иногда работает, иногда нет

У меня странная проблема. Сначала я не хотел использовать метод.on(), потому что вообще не мог заставить его работать, поэтому я использовал.live().

Сейчас я пишу новый сценарий jQuery, и я интенсивно использовал.on(), и он работает. До сих пор.

Код jQuery:

   $('#artistList a').on('click',function(e){
    console.log($(this).parent().text());
    e.preventDefault();
   });

HTML-код:

<div id="artistList">
 <div class="artist"><a class="delete" href="#"></a>Psy</div>
 <div class="artist"><a class="delete" href="#"></a>Fernanda Martins</div>
 <div class="artist"><a class="delete" href="#"></a>DJ Nreal</div>
</div>

Также попробовал эти методы:

   $('#artistList>a').on('click',function(e){
   $('.delete').on('click',function(e){

Неудачно. Что мне не хватает?

Это единственная часть, которая не работает

Я прочитал документацию о.on() и на этом основании это должно работать. Также я использую последнюю версию jQuery (jquery-1.8.3.min.js).

РЕДАКТИРОВАТЬ

<a> элементы имеют width: 15px а также height: 15px в CSS, чтобы они были видны.

Источник

2 ответа

Решение

Для того, чтобы работать как live вам нужно делегировать обработчик элементу более высокого уровня.

 $('body').on('click','#artistlist a', function(e) {
     // note the change to the selector to reflect your actual mark up
     // handler body
 });

Использование этой формы on необходимо, если элементы, к которым должен применяться обработчик, добавляются динамически после начальной загрузки страницы. Также обратите внимание, что обработчики должны применяться после загрузки DOM либо путем размещения сценариев непосредственно перед концом элемента body, либо с использованием ready обработчик события, $(function() { ... });

Если обработчик иногда работает, а иногда нет, то это скорее всего условие гонки при загрузке страницы между элементами, загружаемыми в DOM, и вызываемым скриптом. Обычно это признак того, что вы не добавили обработчики в обработчик готовых событий.

Источник

Ваши ссылки (<a> элементы) здесь пусты, поэтому они явно не могут поймать click событие. Я полагаю, вы забыли переместить эти Psy, Fernanda Martins и т.д. внутри <a href="..."></a>,

Кроме того, только второй селектор будет на самом деле собирать эти ссылки (так как все они имеют класс delete на них). Первый - '#artistList>a' - пытается найти якоря, которые являются прямыми потомками элемента с artistList Я бы. Но ему суждено провалиться в этом благородном квесте, потому что есть еще один слой, разделяющий их - <div class="artist">, Таким образом, правило должно быть что-то вроде '#artistList a',

Источник
Другие вопросы по тегам