浏览器-javascript 中的观察者模式：订阅事件“添加了 Dom 元素”并处理此元素答案

【问题标题】：Observer pattern in browser-javascript: subscribe to event "Dom element added" and handle this element浏览器-javascript 中的观察者模式：订阅事件“添加了 Dom 元素”并处理此元素
【发布时间】：2015-12-10 07:31:36
【问题描述】：

我有一个问题：

$(function() {
    $('form').each(function() {
      // do smthing with form
    });
});

表单可能会动态显示，即由 javascript 构建。我需要在加载后处理它们，比如：

$('form').onload(function() {
   // it's called after new form was added to dom
});

我考虑过使用setInterval，但也许 HTML5 或新的 ES 标准带来了新的东西......

有人帮助编写具有上述特征的加载回调吗？

附：为了阐明目的：我需要将事件处理程序附加到事件“元素已添加到 dom”。

【问题讨论】：

为什么不拥有几个函数——一个用于创建表单，另一个用于在表单添加到 DOM 后对其进行处理。一个接一个地调用一个函数。
你能给我们看看你的 HTML 吗？
重构现有网站的代码花费了太多时间......我需要快速而棘手的东西:)
@Dean Christian Armada，所需的技巧与我拥有的真实 html 没有任何共同之处。目的是抽象的 - 订阅新的 form added to dom 事件并处理表单。

标签： javascript jquery observer-pattern

【解决方案1】：

实际上有一个现在被称为“DOMNodeInserted”的事件已被弃用，最好使用delegated events。使用委托事件，您可以处理动态添加到 DOM 的新元素上的事件。

【讨论】：

我可以问你一些关于 DOMNodeInserted 的 sn-p 吗？
是的，你可以在我为你制作的这个小提琴上查看它。 jsfiddle.net/vhdmsm/2yg5n7L9
非常好，看起来很有前途。以及为什么不推荐使用 DOMNodeInserted :) ？
DOMNodeInserted 不受 IE 支持（可能是 8 及以下）并且已弃用：w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted

【解决方案2】：

将其包装在一个函数中

$(function() {
    function modForm() {
    $('form').each(function() {
      // do smthing with form
    });
    }
   modForm();
  $('a').click(function(){
    //add form dynamically
    $('body').append('<form>');
    //call the function agan
     modForm();
  });
});

【讨论】：

解决方案是concreate并且ok。但是我可以订阅some element added to dom 事件并处理这个元素吗？
订阅是什么意思？
更新DOM时会调用该函数，例如：添加一个新表单$('body').append('<form>');modForm();并在其后调用该函数
en.wikipedia.org/wiki/Observer_pattern。我希望 DOM builder 通知我添加了新表单，即我想订阅 DOM builder 事件。
除非您自己编写代码，否则没有这样的事情。