Входное значение клонированного div без изменения или запуска событий

Question

У меня есть скрытый div, который я редактирую, клонирую и показываю пользователям. В этом div есть вход, для которого я установил атрибут value, используя jQuery (пробовал, вероятно, всеми методами). После того, как я сгенерирую новый div и покажу его пользователям, ввод не запускает какие-либо события (focus, focusout, change) и значение input не изменяется в HTML. Что я пропускаю или делаю неправильно?

Редактировать (код): HTML

<div class="item-wrapper" id="mock-item">
  <div class="item-img"></div>
  <div class="item-primary">
    <p class="item-name">Foo Bar</p>
    <input type="text" class="set-amount">
  </div>
</div>

JS:

$("div.item-wrapper").click((e) => {
    let item_id = e.currentTarget.id
    let itemDetails = {
        item_name: $(`#${item_id} .item.name`).text(),
        suggested_amount: $(`#${item_id} #item-amount`).text(),
        icon_url: $(`#${item_id} .item.big`).attr("style"),
    }
    $(".item-img", tmp).attr("style", itemDetails.icon_url)
    $("#mock-item .item-name").text(itemDetails.item_name)
    $("#mock-item .set-amount")[0].setAttribute("value", itemDetails.suggested_amont)

    $("#mock-item").clone().removeAttr("id").appendTo(".item-wrapper").show()
})

Answer 1

Клонирование элемента удаляет из него всех слушателей событий. Если вы хотите прослушивать все прослушиватели событий для элементов с данным селектором, вы можете использовать jQuery s .on:

$(document).on("click", ".class", function () {
  const $this = $(this);
});

Вы также можете установить параметр withDataAndEvents на .clone к истине: .clone(true).