如何为jQuery中动态创建的元素绑定REMOVE事件监听器？

你之前用事件委托绑定点击事件成功，是因为点击事件会冒泡，但元素被移除的场景完全不一样——remove不是一个会冒泡的原生DOM事件，而且jQuery的.on('remove')其实是内部的自定义事件，根本不会自动触发，所以直接套用事件委托的思路就行不通啦。

现在最可靠、通用的方案是使用MutationObserver，这是浏览器原生提供的监听DOM变化的API，能精准捕捉到元素被移除的动作，而且性能比旧的DOMNodeRemoved事件好很多。

具体实现代码 #

下面是针对你的需求写的示例，能监听整个文档中.someClass元素被移除的情况：

// 定义要监听的目标元素选择器
const targetSelector = '.someClass';
// 选择监听的根节点（如果只需要监听某个容器，替换成对应的DOM元素即可）
const rootNode = document;

// 创建MutationObserver实例，处理DOM变化
const removalObserver = new MutationObserver((mutations) => {
  // 遍历每一次DOM变化记录
  mutations.forEach((mutation) => {
    // 检查本次变化中被移除的节点
    mutation.removedNodes.forEach((removedNode) => {
      // 确认被移除的是元素节点，且匹配我们的目标选择器
      if (removedNode.nodeType === Node.ELEMENT_NODE && removedNode.matches(targetSelector)) {
        // 这里执行你需要的操作
        alert("Div was removed!");
      }
    });
  });
});

// 配置监听选项：开启子节点变化监听，同时监听嵌套子树
removalObserver.observe(rootNode, {
  childList: true,
  subtree: true
});

补充：如果只处理jQuery移除的场景 #

如果你所有移除元素的操作都是通过jQuery的.remove()方法执行的，也可以通过重写jQuery的方法来触发自定义事件，这样就能继续用你熟悉的事件委托语法：

// 先保存原生的jQuery remove方法
const originalJQueryRemove = $.fn.remove;

// 重写remove方法，在执行前后触发自定义事件
$.fn.remove = function() {
  // 移除前触发事件（可选）
  this.trigger('beforeRemove');
  // 调用原生方法完成移除
  const result = originalJQueryRemove.apply(this, arguments);
  // 移除后触发事件
  this.trigger('afterRemove');
  return result;
};

// 用事件委托监听自定义的移除事件
$(document).on('afterRemove', '.someClass', function() {
  alert("Div was removed via jQuery!");
});

不过这个方法有局限性：只有通过jQuery的.remove()移除的元素才会触发事件，原生JS的removeChild()或者浏览器自动移除元素的情况就捕捉不到了，所以还是更推荐使用MutationObserver作为通用方案。

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