Jquery动态添加元素的fadeIn/fadeOut及click事件绑定失效问题

嗨，我来帮你拆解这个问题～

首先明确说：fadeIn/fadeOut 本身完全不会影响 click 事件的触发，你遇到的问题核心其实是「动态生成元素的事件绑定逻辑」。

为什么直接绑定 .gradbdr 没反应？ #

你是通过这段代码动态把元素添加到页面中的：

$($(hidden_id).html()).hide().prependTo("#website_status_gallery").fadeIn(1000);

当你执行 $(".gradbdr").on("click", function() { console.log("******"); }) 时，那些带 .gradbdr 类的元素还没被添加到 DOM 里呢！常规的事件绑定只能作用于绑定代码执行时已经存在的DOM元素，所以这段绑定等于“无效操作”，自然点击没响应。

为什么绑定父元素 #website_status_gallery 能生效？ #

这其实用到了事件委托的机制：DOM 事件会沿着元素的父级向上冒泡，你把事件绑定到已经存在的父元素上，父元素就能捕捉到来自子元素的冒泡事件——哪怕子元素是后来动态生成的。

正确的解决方式 #

如果你只想监听 .gradbdr 的点击事件，只要把事件委托的写法细化一下，指定目标子元素的选择器即可：

$("#website_status_gallery").on("click", ".gradbdr", function() {
  console.log("******");
});

这样不管你之后通过 fadeIn 动态添加多少个 .gradbdr 元素，点击它们都会正常触发日志打印了。

再啰嗦一句：fadeIn 只是修改元素的 display 属性（从 none 切换到可见状态），完全不会影响元素的事件绑定逻辑，所以别背这个锅啦 😄

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