提问人：brichins 提问时间：11/4/2015 最后编辑：Brian Tompsett - 汤莱恩brichins 更新时间：3/22/2020 访问量：2435
我可以从 DOM 上更远的动态创建的 HTML 输入元素中捕获更改事件吗？[复制]
Can I catch the change event from a dynamically created HTML input element farther up the DOM? [duplicate]
问：
我有一个表单元素，它是在页面加载后动态生成的。我正在使用jQuery附加一个事件，该事件将更新表单中的其他字段，并希望消除每次替换包含的表单时重新连接处理程序的需要。<select>change<select>
对于动态元素的事件，我一直在转向不显眼的 JavaScript，并希望使用这种方法，但没有成功。直接附加到节点很麻烦，因为当在 DOM 中替换节点时，连接的事件侦听器会随之消亡，并且必须再次附加新节点。clickchange<select>
所以我想知道，有没有办法不显眼地将更改事件处理程序分配给新创建的 <select> 的父元素，并让事件冒泡到以前存在的元素上的处理程序，以避免每次创建新的目标输入元素时都附加处理程序？
答：
0赞
brichins
11/4/2015
#1
是的！
$('#StaticParentNode').on('change',"select.qualifiers", function(){
alert("Change detected from parent");
});
当然，在发布我的原始答案（下图）后 2 分钟，我终于得到了这个工作。哎呀。
不。
虽然在父级或父级上附加不显眼的事件侦听器非常适合从页面上以前不存在的元素中冒泡事件，但只能将事件侦听器附加到具有该类型事件的元素。<div>documentclick
如 jQuery .change API 文档中所述（尽管此问题不是特定于 jQuery）：
当元素的值发生更改时，将向该元素发送更改事件。这个活动仅限于元素、盒子和元素。
<input><textarea><select>
由于没有更改事件，因此它们也无法从子级中截获更改事件。<div>document
解决 方案：
只需在生成元素时设置为先前定义的函数：。从关注点分离的角度来看，这并不纯粹，而是一种简单的方法，在 AJAX 请求中添加最少的额外 HTML，并且在 AJAX 调用完成后无需摆弄处理程序。
onchange<select onchange='MyModule.selectChanged()'>[<options>]</select>或
每次创建需要它的新元素时，（重新）附加事件侦听器，无论是“手动”（例如在函数中）还是将其连接到处理 AJAX 结果的任何工具（例如修改或扩展）。请参阅有关 SO 的其他地方的示例。
$.ajax success.prototype
评论