Почему не работает onclick для созданных во время setInterval элементов?

Question

[srnsdlmtn]

С помощью setInterval создаю элементы

setInterval(function() {
     for (var i=0; i<getRandomInt(1,5); i++) {
         $('<div></div>').addClass("num").
          append(getRandomInt(1,25)).
          appendTo("#field");
      }
}, 200);

Потом хочу вызвать событие при нажатии на них вне этой функции, но ничего не происходит

$('.num').on('click', function() {
  alert(1);
});

Если вставить код выше, в функцию setInterval, то алерт будет выводиться, но ровно столько раз сколько элементов было создано. Почему так и как это можно исправить?

Answer 1

[Денис Инешин]

Вам поможет делегирование событий.

$(document).on('click', '.num', function () {
    console.log(123);
});

Суть в том, что вы пытаетесь повесить слушатель события на еще не существующие элементы. Конечно же ничего не сработает.

Comments

[srnsdlmtn]

помогло, спасибо!