如何使用jQuery隐藏点击事件触发后才动态生成的div元素

问题原因 #

你当前编写的代码存在执行时序问题：绑定在.first上的点击事件回调，执行顺序早于原有生成.second元素的逻辑。你执行$(".second").hide()时，.second元素还未被插入DOM树，选择器无法匹配到对应元素，隐藏操作自然不生效。

可行解决方案 #

方案1：添加短延迟（简单快捷，适配绝大多数场景） #

用setTimeout将隐藏操作异步执行，等待原有逻辑完成.second的创建插入后再执行隐藏，仅需修改少量代码：

$(".first").on("click",function() {
    // 延迟0毫秒即可让任务等待当前所有同步逻辑执行完成后再跑
    setTimeout(() => {
      $(".second").hide();
    }, 0);
});

该方案适合.second是同步生成的场景，代码改动最小。

方案2：用MutationObserver监听DOM变化（适配全场景，更稳定） #

如果.second是异步生成（比如生成前要请求接口），可以监听DOM节点变化，只要匹配到.second元素被插入，就自动执行隐藏，完全不用关心生成逻辑的时序：

// 创建DOM监听器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 遍历所有新增节点
    Array.from(mutation.addedNodes).forEach(node => {
      // 匹配到.second元素就直接隐藏
      if (node.nodeType === 1 && node.classList.contains('second')) {
        $(node).hide();
      }
    })
  })
})
// 启动监听，可将document.body替换为.second实际会插入的父容器，提升性能
observer.observe(document.body, {
  childList: true,
  subtree: true
})

该方案不管.second什么时候生成、用什么逻辑生成，只要插入DOM就会自动隐藏，兼容性和稳定性更高。

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