Почему добавленный на страницу элемент не реагирует на клик?

Question

[Абра Кадабра]

Добрый день.
Возникла необходимость добавить элементы в форму.
Делаю это вот так. Я приблизительно набросал то, как должно все выглядеть.
Элементы добавляются. Но клик срабатывает только на том, который изначально был на странице.
Вы можете убедиться в этом нажав на самый первый выпадающий список (алертом вдаст его номер в форме).
Клик выглядит так:

$(".select").click(function(e){
		var elementId =  $(this).attr("data-form");
		alert(elementId);
		form['selectedSubject'+elementId] = "Select subject";
		$("#subject-select"+elementId).toggleClass("show");
	});

А добавление элемента вот так:

$("#add-subject").click(function(){
	
//перечисление элементов, изменение номеров их ID    
var blockToAdd = '<label for="subject-select'+subjectNumber+'">Subject <span>*</span></label>
<ul class="select" id="subject-select'+subjectNumber+'" data-form="'+subjectNumber+'"><li class="option default active">Select subject</li><li class="option">Math</li<li class="option">Programming</li>
<li class="option">Programming math</li><li class="option">Math in Programming</li></ul>
<label for="hours">Hours <span>*</span></label><div class="hours" id="hours'+subjectNumber+'">
<div class="hours-minus" id="hours-minus'+subjectNumber+'"></div><div class="hours-amount" id="hours-amount'+subjectNumber+'"></div><div class="hours-plus" id="hours-plus'+subjectNumber+'">
</div></div><label for="message">Remarks</label><textarea name="message" id="message'+subjectNumber+'" placeholder="Type your message"></textarea>';
	
          $("#add-subject").before(blockToAdd);	
        //$("#add-subject").after(blockToAdd);
        //$("#add-subject").prepend(blockToAdd);
        //$("#add-subject").append(blockToAdd);
	subjectNumber++;
});

Вот этими 4мя вариантами я пробовал добавить элементы.
В чем может быть проблема ?

Answer 1

[Дмитрий Новиков]

потому что на динамические элементы обработчики событий добавляются через on:

$(document).on("click","#element",function() {
...
});

Comments

[Алексей Уколов]

Формулировка у вас неверная. Любые обработчики событий добавляются через on, здесь смысл в делегировании - навешивании обработчика на родительский элемент, который всегда гарантированно остается на странице.

[Абра Кадабра]

Спасибо большое, то, что нужно!

Answer 2

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

Вам нужно делегирование событий. Суть метода в том, что обработчик события навешиваем на корневой элемент, можно вообще на document. Далее, благодаря всплытию, все события поднимаются снизу до этого узла, в том числе и события добавленных позже элементов. Всё что осталось, проверить источник в объекте события на соответствие нашей цели и вызвать коллбэк. На jQuery это делается элементарно, как показал Дмитрий Новиков

Comments

[Абра Кадабра]

Спасибо большое.