最近边上班边做毕设（感觉自己马上要接到离职通知书了），好久没写原生js，遇到一个问题，前端请求返回了一个部门Json数组，大概长这样：
var json = [{
dId: 1,
level: 0,
dName: '研发中心',
pid: ''
}, {
dId: 101,
level: 1,
dName: '部门1',
pid: 1
}, {
dId: 102,
level: 1,
dName: '部门2',
pid: 1
}, {
dId: 103,
level: 1,
dName: '部门3',
pid: 1
}, {
dId: 10101,
level: 2,
dName: '小组1',
pid: 101
},{
dId: 10102,
level: 2,
dName: '小组2',
pid: 101
},{
dId: 10201,
level: 2,
dName: '小组1',
pid: 102
},{
dId: 10202,
level: 2,
dName: '小组2',
pid: 102
},{
dId: 10203,
level: 2,
dName: '小组3',
pid: 102
}];
我需要把它渲染成树结构，这他么居然困扰了我一早上（一边做项目组任务，一遍切换做毕设，强行解释成精力没办法集中），晚上回来，认真写写就出来了；
department
结果如下（旁边的图标是用来点击显隐组级部门用的，测试而已，没写样式，不要太在意）：
你可能已经发现了，上面还有一个代码没写注释，我把它拎出来：
$("#Department").on('click','span',function(){
alert($(this).siblings("input").val())
})
这就是jquery的比较常用的事件绑定，用关键字 on（当然以前也有 bind、live、delelgate 之类的），
$(selector).on(event,childselector,data,function)
参照我的写法，可以比较清楚的理解各个参数的意思，
- event：必需项，这可以指定一个事件：‘click’，也可以指定一组事件：‘click dbclick mouseout’；
- childselector：可选；表示需要添加事件处理程序的元素，一般为selector的子元素，没填则表示事件绑定在 $(selector) 上；
- data：可选；需要传递的参数；
- function：必需项；当绑定事件发生时，需要执行的函数；
既然已经知道了这个事件绑定了，那么什么时候用它呢？个人觉得平时给dom写事件，最好都采用绑定这样比较稳妥，因为我们知道，事件绑定的好处就是像无赖般一旦定义了，就是死死地绑在指定选择器对应的dom上了，不关你是原本就存在于document中的 还是后面 append进去的，只要你满足绑定条件，事件一定会触发。
回到之前的代码，我的写法是获取我点击的部门所对应的dId（因为我后面要根据这个id发请求去获取用户列表），那么当我把这段代码写在 script 的最前面的时候，我就得采用如上写法，用事件绑定到 #Department 下的 span节点上（因为页面渲染是按照文档顺序的，这时候下面进行的 append 等操作还没被渲染，所以页面文档树中还没有这些dom，如果没采用事件绑定 事件是肯定不会生效的）。
但如果我们把这段代码写在 append的后面，也就是在确保你要绑定事件的 append 已经都结束了，页面文档树长已经渲染了这些 dom 了，那么你就可以不用采用事件绑定了 ：
$("#Department").find("span").on('click',function(){
alert($(this).siblings("input").val())
})
这样也可以实现同样的功能的。
当然，个人建议是，在确认绑定事件不会影响后续操作时，能绑定的尽量去绑定吧。