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

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

本文关键字：元素 输入 事件 创建 DOM 我可以 动态 HTML      更新时间：2023-09-26

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

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

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

是

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

很自然，在发布我的原始答案（如下）2分钟后，我终于完成了这项工作。Doh。

没有。

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

正如jQuery .change API文档中所述（尽管此问题不是jQuery特有的）：

当元素的值发生更改时，会将更改事件发送到该元素。此事件仅限于<input>元素、<textarea>框和<select>元素

由于<div>和document没有更改事件，因此它们也无法从其子代中截取更改事件。

解决方案：

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

    或者，

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

相关文章：