使用jQuery实现双击事件失效问题排查与解决

嘿，这个问题我之前开发时也踩过坑！你遇到的核心问题是：普通的dblclick()事件绑定只能作用于绑定代码执行时已经存在于DOM中的元素，而你提到这个元素是通过JS动态创建的，绑定代码执行的时候它还没出现在页面上，自然就没触发效果啦。

解决方案：使用事件委托（Event Delegation） #

jQuery的.on()方法支持事件委托，我们可以把事件监听绑定到一个提前存在的父元素（甚至document）上，当事件冒泡到这个父元素时，再判断触发事件的目标是不是我们要监听的元素，这样哪怕元素是后来动态创建的，也能触发事件。

给你修改后的代码：

// 推荐：如果有固定存在的父元素，用它代替document，性能更好
$(document).on('dblclick', '#dashboard-acrs-map', function() {
    alert("asdasdasdasd");
});

为什么这样可行？ #

• 事件委托利用了DOM的事件冒泡机制：当你双击动态创建的#dashboard-acrs-map元素时，双击事件会向上冒泡到我们绑定的父元素（比如document）。
• .on()方法会检查触发事件的目标元素是否匹配第二个参数里的选择器（#dashboard-acrs-map），如果匹配就执行回调函数。

额外小提示 #

1. 尽量选择离目标元素最近的、页面加载时就存在的父元素来绑定事件，而不是直接用document，这样能减少事件冒泡的层级，提升性能。比如如果这个动态元素的父容器是某个固定存在的DOM节点，那就用该节点代替document。
2. 你原来的代码里有个小笔误：$"#dashboard-acrs-map"应该写成$("#dashboard-acrs-map")，不过这不是动态元素事件失效的核心原因。

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