-11-14
昨天做了一个在线投票网站，是为研究生院“良师益友”活动准备的。
在其中遇到一个问题，用 ajax 异步更新了导师列表，列表中有“投票”按钮，在异步更新完成之后，再次点击“投票”按钮则一点动静没有。调试之后发现连按钮的 jQuery 的 click 事件都不能触发了。造成了很大的困扰。按照自己的理解代码没有问题，可是效果就是不对，那就是理解有问题了。
查阅资料后果然是自己对机制的不了解导致的这个问题。
原来的代码写的是：
$(".vote_bt").click( function () {……(此处代码省略)………………$.ajax({……(异步更新)})})
上述代码中的异步更新操作，是将触发 click 事件的 vote_bt 也更新了的。也就是说通过 ajax 动态加载出了新的 vote_bt，那么开始使用的click事件就是无法起作用的，因为事件绑定的时候这个 DOM 并不存在。
这个时候就要使用on()方法，on()方法在被选元素及子元素上添加一个或多个事件处理程序，将原来程序改为如下代码：
$(document).on("click", ".vote_bt", function(){……(此处代码省略)………………$.ajax({……(异步更新)})})
使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素），将子元素的事件绑定到父元素上，子元素被点击后，事件会冒泡到父元素，由父元素负责捕捉然后触发事件。
