Узнать значение Input button если он изменен?

Question

[Сергей Явин]

Есть блок с кнопками на сайте, при клике на любую кнопку этот блок меняется.

<div class="block">
				<div class="block__row">
					<div class="block__colum">
						<input id="btn1" class="btn" type="button" value="1">
					</div>
					<div class="block__colum">
						<input id="btn2" class="btn" type="button" value="2">
					</div>
					<div class="block__colum">
						<input id="btn3" class="btn" type="button" value="3">
					</div>
				</div>
			</div>

let arr = [`<div class="block__row">
					<div class="block__colum">
						<input id="btn1" class="btn" type="button" value="Переподготовка">
					</div>
					<div class="block__colum">
						<input id="btn2" class="btn" type="button" value="Повышение квалификации">
					</div>`, 

					`<div class="block__row">
					<div class="block__colum">
						<input id="btn1" class="btn" type="button" value="6">
					</div>
					<div class="block__colum">
						<input id="btn2" class="btn" type="button" value="5">
					</div>
					<div class="block__colum">
						<input id="btn3" class="btn" type="button" value="4">
					</div>
				</div>
</div>`];

function strPad(elementos, number_element) {
		$(".block").empty();
		$(".block").append(elementos[number_element]);
  	}

До замены я могу получать value кнопи которая была нажата.

window.onload = function (){
    var k = document.getElementsByClassName("btn");
    for(var i = 0; i < k.length; i++){
        k[i].onclick = function (){
            console.log(this.value);
            strPad(arr, 0);
     }
}
}

Но после того как они поменялись то эта функция перестает работать. Как сделать так чтобы функция отрабатывала даже при нажатии вновь созданных кнопок?

Comments

[lUser L]

Делегирование событий

[Павел Корнилов]

Я же уже приводил пример обработки подобных конструкций. Если вам принципиально, можете button в нём заменить input-ами, смысл совершенно не поменяется. Только вместо метода textContent будете использовать value.
Там и делегирование используется, о котором вам сказал Эмиль 🔥 выше.

[Сергей Явин]

Павел Корнилов, Есть такой код

function strPad(elementos, number_element) {
	$(".block").empty();
	$(".block").append(elementos[number_element]);
}

box.onclick = function(event) {
	let target = event.target;
	console.log(target);
	strPad(teacher, 0);
}

Но почему когда кнопки поменялись и я нажимаю на новые кнопки ничего не проиходит? Даже ошибок нет!

[Павел Корнилов]

Сергей Явин, начинайте путь с освоения хороших практик программирования. Это, извините, поллный ГК.
Смотрите:
1. Вы при каждом вызове функции strPad 2 раза ищете в модели $(".block"). Если будет несколько вызовов функции - количество поисков умножайте на 2. В этой ситуации нужно сохранить найденную коллекцию в переменную и обращаться уже к ней. var $block= $(".block"); Так -- поиск будет один на все случаи.
2. Что такое box? Где он определяется?
3. Очень плохая практика -- навешивать обработчик на событие, обращаясь к нему как к свойству объекта. Так можно его легко перезаписать и не заметить. Используйте либо метод on jQuery, либо нативный addEventListener

Это вам для начала понимания. Как разберетесь с пунктами выше, выложите свой код на кодпен и дайте ссылку, будет проще подправить там при необходимости.

Answer 1

[lUser L]

DEMO - не знаю, что вы задумали, но сделал так. Раз, вы используете jq, то используйте делегирование, что бы обратиться к элементам, которые добавлены динамически.
Например от родителя - body

$('body').on('click', '.btn', function(){
});