Как биндить функцию элементу при обновлении DOM?

Question

[qwertybnm]

Присваиваю форме функцию, которая при сабмите подсчитывает количество элементов в определенном div`е:

RequestForm.bind('submit',
			function()
			{
				$(document).find(ServicesItem).each(
					function()
					{
						alert();
					}
				);
			}
		);

Эти элементы в него добавляется опять же при помощи jQuery. И получается, что при загрузке страницы в div`е нет ни одного нужного элемента, но когда мы его добавляем, эта функция уже не учитывает их. Если же прописать в html файле нужный элемент, то все работает.
Как можно это правильно исправить?
У меня есть вариант, что при каждом добавлении элемента при помощиjQuery заново биндить эту функцию, но я не уверен, что так будет правильно

Answer 1

[Кирюшка Цисарь]

$(document).on('submit', RequestForm,
      function()
      {
        $(document).find(ServicesItem).each(
          function()
          {
            alert();
          }
        );
      }
    );

Comments

[qwertybnm]

Спасибо большое, работает.
Хотел бы уточнить, как работает данный код. Мы при каждом submit`е берем $(document) - это каждый раз мы берем содержимое документа на момент выполнения события?

[Кирюшка Цисарь]

qwertybnm, это просто общий код, в частности можно использовать и такой
$('.simple').on('submit', ....

Главное - это .on - изначально навешивает всем нужным тэгам обработчик, т.е. при добавлении в DOM нового, к примеру скажем <div></div>, слушатель уже существует -> всё работает

[qwertybnm]

Кирюшка Цисарь, в ранних версиях jQuery это был метод .live()?
Просто я раньше пробовал подобным способом сделать, но не сработало.
То есть структура должна быть по типу $(parent).on(event, child, function);? Я имею ввиду, что не получиться повесить метод .on() на дочерний элемента child`а или на самого child`a, верно?

[gleendo]

qwertybnm, то есть нужно было учить JS, а не задавать подобные вопросы...
Без обид, но вот такие вот вопросы, особенно с тэгом JQuery, ой как бесят. Почему люди не могут идти по нормальному пути развития. Кто вам постоянно навязывает изучение начинать именно с JQuery?

[qwertybnm]

iamevg_, просто большинство примеров в сети именно с применением jQuery, по крайней мере из тех, что я находил. Вот и получается, что обучение начинается с jQuery, хотя на самом деле мне нужны просто решения для конкретных задач, а до нормального изучения никак руки не доходят.

[gleendo]

qwertybnm, Вам в таком случае стоило бы хотя бы какие то основы JS изучить. Хотя бы для того, чтобы отличать одно от другого, да и к тому же, для того чтобы более правильно задавать вопросы. Вы сейчас задали вопрос, не понимая даже терминологии. На такие вопросы сложней отвечать, когда задающий, сам не знает что хочет. Если бы понимали хоть примерно как все устроено, то без проблем бы составили поисковый запрос и сразу бы нашли решение вашей задачи. К тому же, такими вопросами, вы точно также распространяете эти практики JQuery. Потом такие же пользователи как вы, натыкаетесь на подобный код, на подобные вопросы, на подобные ответы...
И все по кругу.

[gleendo]

qwertybnm, https://jsfiddle.net/xufzwmgm/3/

Answer 2

[gleendo]

Demo

<form>
  <button type="submit">Go</button>
  <button class="add">Добавить</button>
</form>

<ul class="list"></ul>

let index = 0;
let list = $(".list");

$("form").bind("submit", event => { // bind!!!
  event.preventDefault();

  list.find("li").each(item => {
    alert(item);
  });
});

$(".add").on("click", event => {
	event.preventDefault();

	const li = document.createElement("li");
  li.textContent = index++;
  
  list.append(li);
})