label + input не работает при динамическом добавлении

13.08.2022 07:29:49 am

Столкнулся с проблемой не рабочего label при динамическом добавлении. Сценарий добавляет новый блок с label + input, как предыдущий будет заполнен, но он не работает.

Код функции:

function addMoreToProgressBar() {
	newInputBars++;	

	if ((newInputBars + oProgressBar['total']) > oProgressBar['max_upload']) {
		newInputBars--;

		return false;
	};
	
	$('.js_uploader_files_input').each(function() {
		if (empty(this.value)) {
			newInputBars--;
			$(this).parent().remove();
		};
	});

	codeInput  = '<div class="js_uploader_files" id="js_new_add_input_' + newInputBars + '"><input type="file" name:"' + oProgressBar['file_id'] + '" class="js_uploader_files_input" size:"30" id="js_new_add_input_' + newInputBars + '" onchange="addMoreToProgressBar();" /></div>';
	codeInput += '<label for="js_new_add_input_' + newInputBars + '" class="file_button">';
	codeInput += '<div class="file_ico_upload">';
	codeInput += '<svg class="icoSvgUpload" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">';
	codeInput += '<path class="icoPathUpload" d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z"/>';
	codeInput += '</svg>';
	codeInput += '</div>';
	codeInput += '<div class="file_button_text">';
	codeInput += '<div id="file_button_output">' + translations['photo.select_a_photo_to_attach'] + '</div>';
	codeInput += '</div>';
	codeInput += '</label>';
	
	$('#js_uploader_files_outer').append(codeInput);

	return false;
};

Жалоба

13.08.2022 05:39:28 pm

Нашел причину! Дело оказалось в строке:

	codeInput  = '<div class="js_uploader_files" id="js_new_add_input_' + newInputBars + '"><input type="file" name:"' + oProgressBar['file_id'] + '" class="js_uploader_files_input" size:"30" id="js_new_add_input_' + newInputBars + '" onchange="addMoreToProgressBar();" /></div>';

Дело в том, что DIV:

<div class="js_uploader_files" id="js_new_add_input_' + newInputBars + '">

И INPUT:

<input type="file" name:"' + oProgressBar['file_id'] + '" class="js_uploader_files_input" size:"30" id="js_new_add_input_' + newInputBars + '" onchange="addMoreToProgressBar();" />

Имеют одинаковый ID, что неправильно. Меняю это:

<div class="js_uploader_files" id="js_new_add_input_' + newInputBars + '">

Вот так:

<div class="js_uploader_files">

И все работает, как задумано.

Жалоба