动态添加内容时Event watcher失效问题求助

你遇到的问题核心在于：直接绑定事件的方式仅对初始就存在于DOM中的元素生效。当点击POPULATE按钮通过innerHTML重新生成输入框时，原来的lozfield元素被移除，新生成的元素没有绑定之前的change事件，自然无法触发监听逻辑。

解决方案：使用事件委托 #

将事件绑定到一个始终存在于DOM中的父元素上，借助DOM的事件冒泡机制，让父元素监听子元素的事件。这样无论子元素是初始存在还是动态生成，事件都能被正常触发。

修改后的代码如下：

// 事件委托：绑定到父容器lozcontainer，监听子元素lozfield的change事件
$("#lozcontainer").on("change", "#lozfield", function() {
  alert("lozfield-CHANGED");
});

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

原理说明 #

• 事件委托利用了DOM的事件冒泡特性：子元素触发的事件会向上传递到父元素层级。
• 通过on()方法指定目标子元素的选择器#lozfield，父元素会在事件冒泡到自身时，检查触发事件的元素是否匹配该选择器，匹配则执行回调函数。
• 无论子元素是页面加载时就存在，还是后续动态生成，只要它是父元素的子节点且符合选择器规则，事件就能被正确监听。

内容的提问来源于stack exchange，提问作者Laurence Jones