如何使用jQuery监听表单动态生成的错误div的创建与内容变更事件

• 你初始化代码执行时，#email_rappel-error元素还没生成，jQuery选择器返回空集合，事件绑定根本没有生效的挂载目标
• 你使用的DOMNodeInserted等DOM突变事件属于已废弃的API，部分浏览器已经取消支持，且会引发全局性能问题

MutationObserver是目前标准推荐的DOM变动监听接口，性能稳定，兼容性覆盖所有现代浏览器，示例代码如下：

// 选择一个页面初始就存在的、是动态错误div父级的元素，比如表单容器，找不到的话可以先用document.body
const observerTarget = document.body;

// 配置监听选项：监听子节点新增、后代节点深度监听
const observerConfig = {
  childList: true,
  subtree: true
};

// 声明监听回调
const observer = new MutationObserver((mutations) => {
  // 遍历所有变动记录
  mutations.forEach(mutation => {
    // 检查新增的节点
    mutation.addedNodes.forEach(node => {
      // 判断是不是我们要找的错误div
      if (node.nodeType === 1 && node.id === 'email_rappel-error') {
        console.log("错误提示已生成");
        if(node.textContent.trim() === "'Please enter a valid email address.'"){
          // 在这里写你要执行的逻辑
        }
        // 如果不需要后续监听可以在这里调用observer.disconnect()停止监听
      }
    });
  });
});

// 启动监听
observer.observe(observerTarget, observerConfig);

如果一定要用jQuery的突变事件，需要用事件委托绑定到已存在的父级元素上：

jQuery(document).on('DOMNodeInserted', '#email_rappel-error', function() {
  console.log("test");
  if(jQuery(this).text() === "'Please enter a valid email address.'"){
    // 执行逻辑
  }
});

该方案会在全局触发大量无用事件，性能损耗极高，仅临时调试用，生产环境请优先使用MutationObserver方案。

内容的提问来源于stack exchange，提问作者Claims