JQuery事件 document绑定 VS ID绑定

$(document).on('click','#id',function(){}) 和 $('#id').on('click',function(){}) 到底有什么区别？

这个问题在stackoverflow上面已经讨论过了，我今天也遇到这个问题。但是我在遇到该问题的时候想到的不是第一种做法，而是采用第二种在改版。后来我的同事小丸子这样写事件监听，我觉得很神奇，我就去google了。看到stackoverflow的这个答案我就明朗了。感谢小丸子！

问题描述

有这样一个模块A，A模块是以前写的，A模块的所有子模块都是通过左侧菜单列表形式展现的，即一堆的<li></li>元素组成，这些li元素全都是通过jsp脚本语言生成的。现在需要为A模块添加另外一个子模块C，而子模块C的响应时间非常长，因此需要异步来构造。异步构造好了之后，发现新增加的子模块C没有了其他子模块的特效（因为整个页面一出来，通过jsp脚本创建的li元素都已经绑定好了事件），比如点击之后展开子模块的子模块，并改变自身的样式等等效果。此时想到的第一个问题就是，我没有为新增加的子模块C添加特效的事件监听。

解决方法

1. 为子模块C添加事件监听。即通过$("#C").off("click").on("click",function(){});这样的方式来监听，添加完之后，确实可以达到我想要的效果。
2. 自以为一切尽在掌握，偏偏是人外有人，天外有天啊。看到同事小丸子的写法是$(document).on("click","#C",function(){});，这段是在一开始初始化的时候就监听的，动态创建的子模块就都不用再监听click事件了

$(document).on('click','#id',function(){}) vs $('#id').on('click',function(){})两者的区别

发现事情的神奇之后，我开始寻找$(document).on()来绑定事件的原因了。

$(document).on(“click”,”#C”,function(){}) :

通过将事件绑定到更高层的Dom tree上面(在这里是document对象) 这样事件处理器就会在事件到达选择器选中的元素的时候触发。（通过代理一个事件处理器这样的方式，这样的话即使元素在绑定事件的时候不存在DOM Tree上面，而是后续动态创建的，也会被执行。）

$(“#C).on(function(){}) :

如果使用这种方式，并且 #C 的元素是在绑定事件之后创建的，那么事件处理函数将永远不会被执行。使用这个方式来监听事件，你要确保在你绑定事件之前，#C元素在DOM里已经存在了。

<<< 捐赠 >>>

转载请注明出处！ 原文地址： http://webinglin.github.io

Reference:

$(document).on(‘click’, ‘#id’, function() {}) VS $(‘#id’).on(‘click’, function(){})