事件观察器在动态添加的内容上失败答案

【问题标题】：Event watcher failing on dynamically added content事件观察器在动态添加的内容上失败
【发布时间】：2022-07-20 16:05:29
【问题描述】：

提前感谢您的帮助！ :)

我正在使用 javascript 向文档添加字段，但元素监视器仅适用于硬编码字段。

例如在下面的代码中，对 lozfield 的更改进行了监控，该更改最初运行良好。但是，如果您单击填充按钮并使用完全相同的输入字段重新填充，则手表将不再工作。在调试中，该字段旁边有事件......直到它被重新填充，此时事件消失。（为我可能不正确的术语道歉！）。

$("#lozfield").change(function() {
  alert("lozfield-CHANGED");
});

$("#populate").click(function() {
  document.getElementById("lozcontainer").innerHTML = '<input type="text" id="lozfield" value="ABC">';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lozcontainer">
  <input type="text" id="lozfield" value="ABC">
</div>
<input id="populate" type="button" value="POPULATE">

【问题讨论】：

或更改值而不是所有输入或将事件重新分配给新输入。

标签： javascript html jquery input

【解决方案1】：

您需要将您的活动委托给更高的元素 - 在您的情况下，我建议您使用 lozcontainer

$("#lozcontainer").change("#lozfield", function() {
  alert("lozfield-CHANGED");
});

$("#populate").click(function() {
  document.getElementById("lozcontainer").innerHTML = '<input type="text" id="lozfield" value="ABC">';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lozcontainer">
  <input type="text" id="lozfield" value="ABC">
</div>
<input id="populate" type="button" value="POPULATE">

【讨论】：