jQuery.on() не работает при использовании в соответствии с документацией?

Question

Я был над всей документацией для live() (которая теперь исчезла из jQuery), delegate() и on(). После восьми часов ударов по голове с этой проблемой я не могу понять, как это исправить. Я хочу добавить анонимную функцию в связку ссылок, которые создаются из данных, вносимых через AJAJ. Я попытался следующий код:

$("#more_items_outer").on(
      'click', 
      '.show_more', 
      function(a){ 
       var target = a.parentElement; 
       if (target.is(":visible")){ 
        target.hide("slow"); 
       } else { 
        target.show(); 
       } 
      } 
     ); 

Этот код прекрасно работает, когда я запускаю его в консоли JS в моем браузере развития после загрузки страницы. Но этот код ничего не делает для этих ссылок, если он работает до создания реальных ссылок. Насколько я понимаю (как и многие источники, в том числе официальные документы jQuery, описывают это), функция on(), поскольку я использовал его в приведенном выше коде, должен сделать так, чтобы любой созданный элемент класса show_more поскольку потомок любого элемента с id «more_items_outer» выполнит анонимную функцию при нажатии. Это должно быть правдой, даже если создание нового элемента отправляет выполнение этого кода. Это не происходит в моей системе dev здесь, и я все понимаю, почему это может быть так. Я запускаю jQuery 1.9.1, если это помогает.

Answer 1

Во-первых, ознакомьтесь с пунктом 5 ниже. Мне кажется, что у вас есть несколько ошибок javascript в вашей обработчике событий click.

В общем, динамическая форма .on() работает так:

$(static selector that exists).on('click', 'dynamic selector', function() {}); 

Поскольку вы не показали нам свой HTML или Ajax, я могу просто перечислить виды вещей, которые могут пойти не так:

1. Объект (ы), представляемый статическим селектором, должен существовать в момент выполнения вызова .on().
2. Объекты статического селектора должны быть родителями динамических объектов.
3. Динамический селектор должен соответствовать объектам детей, которые либо существуют во время первоначального вызова, либо добавляются позже.
4. У вас может быть ошибка javascript перед вызовом .on(), чтобы он никогда не выполнялся.
5. У вас появляется ошибка javascript в вашей функции обработчика. Ваш код, который ссылается на a.parentElement, кажется неправильным. В этом контексте a - объект события jQuery, и я не думаю, что он имеет свойство parentElement. И даже если parentElement был элементом, тогда следующая строка, где вы делаете target.is(":visible"), не будет работать, потому что target не является объектом jQuery. Таким образом, вы, по крайней мере, должны исправить код в своей функции обработчика. Если это единственная ошибка, вы должны увидеть эти ошибки, указанные в консоли ошибок javascript или консоли отладки.