Как сделать такое делегирование событий jQuery?

Question

[Илья]

Самописный интернет-магазин, есть избранные товары, они появляются после загрузки через back-end, также появляются после действий пользователя(добавил товар в избранное).
Проблема в том, что мне нужно событие onclick, но оно работает на элементах, которые появились через back-end.

Структура кода:

<li class="header-wishes-item flex-w flex-t m-b-12" data-id="2">
		<div class="header-wishes-item-img">
			<img class="js-removeWish" src="/images/product-2-1.jpg" alt="IMG">
		</div>

		<div class="header-wishes-item-txt p-t-8">
			<a href="#" class="header-wishes-item-name m-b-18 hov-cl1 trans-04">Cardigan</a>

			<span class="header-wishes-item-info">
				$<span class="header-wishes-item-info--inner">18</span>
			</span>
		</div>
</li>

Когда вешаю атрибут onclick на блок, тоже не срабатывает

Comments

[Николай Чуприк]

Так а как вы назначаете обработчики? Где JS? Используйте метод on(), проблем быть не должно. Он устанавливает обработчик и на "будущие" элементы.

[Илья]

Николай Чуприк,

$(".js-removeWish").on('click', function(){
   func();
   console.log("Событие отработано");
 });

Пробовал, не работает, посоветовали делегирование

Answer 1

[Stalker_RED]

Не совсем понятно что именно вы делаете, но я тут выскажу пару догадок, поправьте если я не прав.
Сперва вы запускаете это:

$(".js-removeWish").on('click', function(){
   func();
   console.log("Событие отработано");
 });

Этот код ищет все элементы .js-removeWish на странице и добавляет к ним обработчик клика.

Потому вы добавляете новые элементы .js-removeWish, но на них такого обработчика нет. Они же позже добавлены.

Если все так, то нужно или научиться в делегирование, или навешивать обработчик при создании.

$('.some_parent_block').on('click', '.js-removeWish', function(){ ... })

Comments

[Илья]

Спасибо, нашёл способ через delegate()

Answer 2

[mattersj]

$(document).on('click', '.js-removeWish', function() {
    console.log('triggered');
});