我可以从DOM中更远的动态创建的HTML输入元素中捕获更改事件吗？

Question

我有一个<select>表单元素，在页面加载后动态生成。我正在使用jQuery附加一个change事件来更新表单中的其他字段，并希望每次替换包含<select>的表单时都不需要重新连接处理程序。

关于动态元素的click事件，我一直在转向不引人注目的JavaScript，并希望将这种方法用于change - 但没有成功。直接附加到<select>很麻烦，因为当在DOM中替换节点时，连接的事件侦听器会随之死亡，并且必须再次附加新节点。

所以我想知道，有没有办法不引人注意地将change事件处理程序分配给新创建的<select>的父元素，并让事件冒泡到处理程序在先前存在的元素上，以避免每次创建新的目标输入元素时附加处理程序？

Answer 1

是！

$('#StaticParentNode').on('change',"select.qualifiers", function(){ alert("Change detected from parent"); });

当然，我在发布原始答案（下方）后2分钟终于完成了这项工作。卫生署。

没有

虽然在父<div>上附加不显眼的事件侦听器或document非常适合从页面上以前不存在的元素中冒泡click事件，但您只能附加一个具有该类型事件的元素的事件侦听器。

如jQuery .change API docs中所述（尽管此问题不是特定于jQuery的）：

  

更改事件在其值更改时发送到元素。此活动仅限于<input>元素，<textarea>框和<select>元素。

由于<div>和document没有更改事件，因此他们也无法拦截其子女。

<强>解决方案：

1. 生成元素时，只需将onchange设置为先前定义的函数：<select onchange='MyModule.selectChanged()'>[<options>]</select>。从关注点分离的角度来看并不纯粹，但是在AJAX请求完成后添加了最少的额外HTML的简单方法，并且在AJAX调用完成后没有摆弄处理程序。

   或

2. （重新）每次创建需要它的新元素时附加一个事件监听器，“手动”（例如在$.ajax success函数中）或将其连接到处理AJAX结果的任何工具中（例如修改或延长.prototype）。参见SO的其他地方的例子。