Не запускается функция CLICK jQuery

Код (Javascript):

1. $('.menu').on('click', '.submenu', function(){
2.                 alert("сработало");
3. });

 

Разница в том, что ты создаешь элемент и jquery не успевает инициализировать его. Поэтому поиск происходит от родителя. Что касаемо on и click - то они не отличаются ничем. Вы могли использовать $('#element').click('#button', function() {}); и ничего не изменилось бы. Просто это мой стиль кода и иногда on выгоднее использовать, например:

Код (Javascript):

1. var typeOn = 'click';
2. $('element').on(typeOn, function() {});

 

Разница в том, что ни о каком "успевании инициализации" тут речи быть не может. Даже на этом форуме не раз звучало такое понятие, как "делегирование событий". Вот тут начинаются все разницы, в том числе и между методами .on() и другими методами событий, как, например, .click().

Это всё потому, что начинаете изучение не с того, что нужно. jQuery - это JavaScript библиотека и было бы логичней сначала изучить именно язык, а потом использовать его производные.
Если попробовать коротко, то идея делегирования состоит в том, что обработчик события устанавливается не на какой-то конкретный элемент(ы), а на статический и предполагаемо родительский для ожидаемого. Такой принцип чаще всего используется для динамически создаваемых элементов документа. Всё дело в том, что JS "живёт" в том же временном промежутке, что и DOM, с которым он загружается на клиенте. Т.е. JS знает только о тех элементах, которые были загружены в браузер до того, как был загружен он сам, а обо всех элементах, которые могут появляться позже - он понятия не имеет. Поэтому можно установить обработчик события на известный элемент и, ориентируясь на "объект события" и его свойство "target", вычислять нужный нам. Свойство target возвращает именно тот элемент, на котором реально произошло событие. Например, у нас есть <div>, а внутри него <span> или другой дочерний элемент. Обработчик события "click" устанавливаем на <div>. При клике внутри div-а на span, сработает событие и target вернет нам именно span, хотя на него событие мы не вешали. Дальше мы можем проверить - тот ли это элемент, что мы ожидаем и, если да, то можем с ним работать. Это же будет рабоnать, если span появиться внутри div-а позже (динамически).
Вот простейший пример.

HTML:

1. <div class="parent">
2.   <div class="child">
3.     <div class="grandchild"></div>
4.   </div>
5. </div>
6.  

Код (Javascript):

1. document.addEventListener('click', e => {
2.   if (e.target.tagName === 'BUTTON') {
3.     console.log('А вот и наша кнопка приехала!');
4.   } else {
5.     console.log('Это не кнопка...');
6.   }
7. });
8.  
9.  
10. // Через 5сек добавим кнопку
11. setTimeout(() => {
12.   document.querySelector('.grandchild').innerHTML = `<button>Hi there!</button>`;
13. }, 5000);