Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Добавление слушателя на динамически созданные объекты (https://javascript.ru/forum/events/46837-dobavlenie-slushatelya-na-dinamicheski-sozdannye-obekty.html)

k1slim 25.04.2014 23:00

Добавление слушателя на динамически созданные объекты
 
Вложений: 1
Доброго времени суток.
Есть страничка, на которую скриптом, что ниже, запихиваются блоки с данными, взятыми из json. Выглядит это как-то так.
function placeTiles(data,nFirst,nLast)
{	
	for(var i=nFirst;i<nLast;i++)
	{
		document.getElementById('content').innerHTML+=
			'<div class="container">' +
				'<div id="itemThumbImgUrl">' +
					'<img src=' + data[i].itemThumbImgUrl + '>' +
				'</div>' +
				'<span class="containerSpanName">' +
					data[i].itemTitle +
					'<br>' +
					data[i].price.min + '$-' + data[i].price.max + '$' +
				'</span>'+
				'<div class="containerDivForButton№1" id="addToCartButton">' +
					'<span>Add to Cart</span>' +
				'</div>'+
				'<div class="containerDivForButton№2">' +
					'<span>Compare</span>' +
				'</div>' +
			'</div>';
			
	}
	
}

Всё было бы хорошо, только вот на серенькие кнопочки нужно повесить по обработчику. Однако листенеры не находят id созданного элемента(мб проблема заключается, в том, что я не представляю, куда эти листенеры запихивать. В файлике с данным кодом они были и перед, и после и даже в самой функции, означенной выше(и лишь там они хоть как-то выполнялись, но сразу же по созданию блоков, а не по клику)), а onclick'и, запиханные внуть innerHTML и вовсе не срабатывают.
Сильно прошу вашей помощи и буду благодарен за советы.
PS:А ещё сильно звиняюсь за говнокод и сумбурность в изложении мыслей..Так же в курсе, что innerHTML плохо, но оговорено было делать именно им, хотя я может чего-то и не понял..

jsnb 26.04.2014 13:17

Ну так при изменении innerHTML перезаписывается всё содержимое элемента. Соответственно старые элементы заменяются на новые с таким же содержимым, но обработчики то привязаны к старым, а старых больше нет, вот они не срабатывают. Так что либо переназначать все обработчики после любого изменения innerHTML, либо ставить обработчик на контейнер и смотреть по target откуда пришло событие. Либо писать вызов нужных функций в атрибут onсобытие создаваемых тегов. Ну или переписывать код по нормальному без innerHTML...


Часовой пояс GMT +3, время: 21:46.