Как навесить обработчики событий на вставляемый html-код?

Доброго времени.

Вставляю кусок формы по кнопке "Добавить", вот код:
function addRowFile()
{
	$('.add-copy__input-file').on('click', function()
	{
		var link = $(this),
			elHTML = '<div class="row row__file row__file_blue"><label class="btn btn__blue upl-button">Прикрепить файл</label><span class="upl-name">Файл не выбран</span><input type="file" class="upl-input"></div>',
			closestRow = link.closest('.form__block').find('.row__file').last();

		$(elHTML).insertAfter(closestRow);

	});
}


Но проблема в том, что вставленные элементы не будут иметь обработчиков, которые есть у таких же элементов изначально.
Как решить эту проблемку?
  • Вопрос задан
  • 280 просмотров
Решения вопроса 2
vicodin
@vicodin
Имею некоторый опыт
вторым аргументом в функцию .on() передать селекторы элементов, на которые вы хотите навесить обработчики, например, так:

$('body').on('click', '.add-copy__input-file', handlerFunc);
Ответ написан
Carduelis
@Carduelis
Web-developer, front-end, js, less
Вопрос детский, но я сам так же тупил вначале.
Вам нужно делегирование событий. Вешаете обработчик не на кнопки, а на родительский тег кнопок. Хоть на <body>. Конечно, вешать на самый корень плохо, по причинам производительности и разграничения кода. Но вешать на тег-родитель, скажем, ленты новостей - дело благое.
Синтаксис на jQuery выглядит так:
$('ul.news-list').on('click',' div > a.button', function() {
// 
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы