Как на сгенерированый темплейт повесть обработчики?

Question

[narkesss]

$(document).ready(function (callback) {
	$(function() {
		$.ajax({
				url: ....',
				dataType: 'json',
				success: function (data) {
					console.log(data.formats)

					console.log(data.colors)
					var colors = data.colors;
					var images = data.formats;

					$(function() {
						
						var ul = $(".product-monogram-list");

						for (i in images) {

							var li = $("<li/>",{class: "dfd"});
							var img = $("<img/>",{src: images[i].image});
									
							li.append(img)
							ul.append(li)	
						}
					});


					$(function() {

						var ulCol = $(".product-monogram-list-color");

						for (i in colors) {

							var colName = $("<span/>",{text: colors[i].title});
							var colBox = $("<span/>", {class: "product-monogram-list-bg"}).css("background-color", colors[i].color);
							var colTtl = $("<span/>",{text: colors[i].title});
							var li = $("<li/>",{class: "dfd"});
							var a  = $("<a/>",{class: "abb"})

							a.append(colBox)
							a.append(colTtl)
							li.append(a)
							ulCol.append(li)

						}
					});

				},

				error: function (jqXHR, exception) {
					console.log('error')
				}
			});
	});

	$(".monogram-btn").click(function(event) {
		 event.preventDefault()

		var prntBtn = $(this).parent()

		prntBtn.next().toggle();

	});

});

Есть вот такой сгенерированный темплейт , Не могу на сгенериррованные элементы повесить обработчик кликов , Почему ? подскажите пожалуйста , я так панимаю в момент запроса этих элементов еще нет.
Как быть в этой ситуации ?

Answer 1

[Никита Егоров]

У вас идет асинхронный запрос, когда получен ответ, создаются элементы.

Вы можете использовать промисы или вешать обработчики события в функции success.

Comments

[narkesss]

Благодарю вас ))) Еще новчиек,многих тонкостей не знаю.

$(".abb").click(function(event) {
		 event.preventDefault()
		 console.log('asdfsad')

	});

Answer 2

[forspamonly2]

ещё для таких случаев можно обработчик делегированного события повесить какому-нибудь родительскому элементу.

$(".product-monogram-list").on("click", ".monogram-btn", function(event) { ... });

а обёртки в $(function() { внутри success у вас лишние.