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

Question

[Slash]

Столкнулся с проблемой не рабочего 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;
};

Comments

[Сергей delphinpro]

полагаю, newInputBars нужно объявить во внешнем скоупе. В том виде как сейчас, эта переменная при каждом вызове создается заново, и id получаются одинаковые.

[Slash]

Так и есть, переменная создана за пределами функции.

Answer 1

[Slash]

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

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">
И все работает, как задумано.

Answer 2

[Сергей Соколов]

тут ошибка наиболее грубая, наверное:

- translations['photo.select_a_photo_to_attach']
+ translations.photo.select_a_photo_to_attach

И в дополнение:

1. почему oProgressBar['total'] а не oProgressBar.total и другие подобные?
   
2. откуда берется функция empty() ? Это не PHP.
   
3. переменная codeInput не объявлена
   
4. много строк с разметкой удобнее записать через обратные одиночные кавычки:

   const codeInput = `
     <div>
       строка 1 ${translations.photo.select_a_photo_to_attach} продолжение
       строка 2
     </div>
   `;

   
   

Comments

[Slash]

Сергей, спасибо за ответ.

1. Так оформлен код двика, которым я пользуюсь.
2. Функция написанная, где то, она есть...
3. Действительно... Недочет, поправлю, как буду дома.
4. Попробую по Вашему примеру.