我可以从 DOM 上方动态创建的 HTML 输入元素捕获更改事件吗?

Can I catch the change event from a dynamically created HTML input element farther up the DOM?

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

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

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

是的!

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

当然,在发布我的原始答案(如下)后 2 分钟,我终于可以正常工作了。呵呵


没有

虽然在 parent <div>document 上附加不显眼的事件侦听器非常适合从页面上以前不存在的元素冒泡 click 事件,您只能将事件侦听器附加到具有该事件类型的元素

jQuery .change API docs 中所述(尽管此问题不是 jQuery 特定的):

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements.`

由于 <div>document 没有更改事件,因此它们也无法从 children 中拦截一个。

解决方案:

  1. 只需在生成元素时将 onchange 设置为 previously-defined 函数:<select onchange='MyModule.selectChanged()'>[<options>]</select>。从关注点分离的角度来看,这不是纯粹的,而是一种简单的方法,将最少的额外 HTML 添加到 AJAX 请求,并且在 AJAX 调用完成后不会摆弄处理程序。

    或者,

  2. (重新)在每次创建需要它的新元素时附加一个事件侦听器,'manually'(例如在 $.ajax success 函数中)或将其连接到任何工具正在处理您的 AJAX 结果(例如修改或扩展 .prototype)。请参阅 SO 其他地方的示例。