使用jQuery实现点击任意元素淡出功能，代码不生效如何解决

• $(document).ready() 要求传入回调函数作为执行入口，你当前的写法没有把事件绑定逻辑包裹在函数内，会导致逻辑在DOM加载完成前就提前执行，部分元素可能绑定失败。
• 你使用了箭头函数作为点击事件的回调，箭头函数没有独立的this指向，会继承外层作用域的this（此处为全局window对象），因此$(this)无法指向你点击的目标元素。
• 直接给所有元素绑定点击事件会触发事件冒泡：你点击子元素时，点击事件会逐层向上传递给所有父元素，导致点击单个元素时，从当前元素到顶层的所有元素都会触发淡出逻辑。

推荐使用事件委托的写法，性能更高，也支持后续动态添加的元素触发效果：

$(document).ready(function() {
  // 把事件绑定在document上，委托给所有元素触发
  $(document).on('click', '*', function(e) {
    // 阻止事件冒泡，避免父元素同步触发
    e.stopPropagation();
    $(this).fadeOut(2500);
  })
})

如果你希望保留箭头函数的写法，可以通过事件对象的target属性获取点击目标：

$(document).ready(() => {
  $(document).on('click', '*', e => {
    e.stopPropagation();
    $(e.target).fadeOut(2500);
  })
})

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