Как правильно добавлять повторные input в форму?

Question

[Денис Букреев]

Доброго дня.

Стоит задача: по кнопке добавлять новые элементы в форму. Количество - не ограничено.


Сначала я подумал - ерунда.
А вот когда столкнулся, понял - проблема.

Добавлять мне надо кастомизированный input[type=file]
Естественно у него есть свои js-обработчики, поэтому, когда вставляешь просто html-код, эти обработчики не будут связаны с новым кодом.
1 вопрос: можно ли как-то к вставляемому html добавить обработчики?

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

Как же тогда быть?
По какому пути идти?

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

UPD:

function addInputFile()
{
	$('.add-copy__input-file').on('click', function()
	{
		var link = $(this),
			elHTML = '<div class="row row__file row__file_blue"></div>',
			closestRow = link.closest('.form__block').find('.row__file').last();

		$(elHTML).insertAfter(closestRow);
	});
}

Answer 1

[Алексей Ярков]

Естественно у него есть свои js-обработчики, поэтому, когда вставляешь просто html-код, эти обработчики не будут связаны с новым кодом.

Будут, если открыть для себя делегирование

Comments

[Денис Букреев]

направление понял, но теория и пара таких же теоретических примеров вообще не дают понимания как реализовать
погуглил в этом направлении - не особо дало результат
добавил свой код, можно меня носом ткнуть куда обратить внимание?

Answer 2

[lega]

Можно так: jsfiddle.net/lega911/j1Lmb84p
В ф-ию scope.prepare уже прикручиваете нужный код/jquery плагин и т.п.