jquery on()事件

最近在写一个后台管理项目的时候因为on事件踩了坑，所以再项目结束之后，想总结性的谈谈jquery的on事件。

on事件是在jQuery1.1之后bind()、live()和delegate()方法新的替代品。

使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

语法

$(selector).on(event,childSelector,data,function,map)

实例

$(document).ready(function(){
  $("#div1").on("click",function(){
    $(this).css("background-color","pink");
  });
 }

看起来这个方法是很好用的，对于自己在js里动态添加的元素用这个方法几乎都是没什么问题的。但我们有时写网页，会运用到别人已经写好的一些插件，插件的代码可能很繁琐，所以我们要在它上面动手脚一般会想到通过获取它的id或者class去做一些事情。这个时候由于你不了解它代码内部的结构，你向上面那样去运用on事件就不生效了。

这个问题困扰了我一天，想了很多办法，把所有的事件绑定方法都使用了一遍，甚至试图去解读插件的源代码。结果第二天突然想到去查一查on事件不执行的原因，终于找到了答案。

原因

on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在on的第二个参数里面。

解决方法

  $( document ).on( "click", ".del_opter", function() {
    console.dir(stat);
  });

网上没有对为什么这样写给出解释，但是我个人觉得应该是先去加载一遍dom在使用on事件的意思吧。

最后啰嗦谈两句感想：

做这个项目中遇到的几个问题，有时几天都没有得到解决，有时真的感到绝望了，晚上睡不着，梦里都是怎样都清不掉的bug。但第二天醒来，突然思维一现，却又看见了一现生机。或许这就是日思夜想的效果吧，你的努力是看得见效果的，不要放弃，下一秒你就可以享受到那豁然开朗的喜悦了。