Как слушать динамически созданный input?

Question

Как слушать динамически созданный input?

Данный код должен переходить по сгенерированной динамически ссылке, которая формируется последовательным забором value="" из input'ов по клику и по достижении трех активированных дает команду браузеру перейти по ссылке.

Проблема в том, что последний input, созданный document.querySelector("body").insertAdjacentHTML("afterEnd", "<label class='ender'><input type='checkbox' name='c'>Модель A</label>"); не слушается скриптом.

///// ТУТ ВЫБОР ТРЕХ ПУНКТОВ /////
const inputs = document.querySelectorAll('input');


const obj = {
  a: {
    path: '',
    isChecked: false
  },
  b: {
    path: '',
    isChecked: false
  },
    c: {
    path: '',
    isChecked: false
  }
}

inputs.forEach(addListener); 

function addListener(input) {
  input.addEventListener('click', onClickHandler);
}

function onClickHandler(e) {
  changeObjectValues(obj[e.target.name], e.target.value, true);
  const checkedInputs = getСlosestCheckedInputs(e.target);

  if (checkedInputs.length > 0) uncheckInputs(checkedInputs);

  if (isAllChecked()) {
    const url = 'https://google.com/' + Object.keys(obj).map(getPath).join('');
    location.href = url;
    uncheckInputs(inputs);
  }
}

function getPath(key) {
  return obj[key].path;
}

function isAllChecked() {
  return Object.keys(obj).every(isChecked);
}

function isChecked(key) {
  return obj[key].isChecked === true;
}

function changeObjectValues(obj, path, isChecked) {
  obj.path = path;
  obj.isChecked = isChecked;
}

function getСlosestCheckedInputs(target) {
  const inputs = target.parentNode.parentNode.querySelectorAll('input[type="checkbox"]');
  const checkedInputs = [];

  inputs.forEach(function getCheckedInput(input) {
    if (input.checked && input != target) checkedInputs.push(input);
  });

  return checkedInputs;
}

function uncheckInputs(checkedInputs) {
  checkedInputs.forEach(function uncheck(input) {
    input.checked = false;
  })
}

    document.querySelector("body").insertAdjacentHTML("afterEnd", "<label class='ender'><input  type='checkbox' name='c'>Модель A</label>");

h4 {
  margin-bottom: 10px;
}

.example-lk {
display: block;
width: 50px;
height: 50px;
border: 1px solid;
}

.ex-lb {
border: 1px solid black;
padding: 5px;
font-size: 13px;
}
h3 {
font-size: 14px;
}
.ender {
  display: flex;
  border: 1px solid black;
  padding: 5px;
}

<h4>Выберите поломку</h4>
<label class="ex-lb">
    <input type="checkbox" value="/codepen/" name="a">Не работает динамик</label>
<label class="ex-lb">
    <input type="checkbox" value="/codepen/" name="a">Не работает зарядка</label>
<label class="ex-lb">
    <input type="checkbox" value="/codepen/" name="a">Не работает экран</label>
<h4>Выберите бренд</h4>
</div>
<ul class="productdetails">
    <li class="product-container">
        <label>
            <input type="checkbox" value="mywishlist/" name="b">Чекбокс</label>
        <h3 class="prod-list-choose">Телефон Acer</h3> </li>
    <li class="product-container">
        <label>
            <input type="checkbox" value="mywishlist/" name="b">
        </label>
        <h3 class="prod-list-choose">Телефон Samsung</h3> </li>
    <li class="product-container">
        <label>
            <input type="checkbox" value="mywishlist/" name="b">
        </label>
        <h3 class="prod-list-choose">Телефeон Vivo</h3> </li>
</ul>

БЛОГ НА HUSL

Как слушать динамически созданный input?

Ответы (0 шт):