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。但第二天醒来，突然思维一现，却又看见了一现生机。或许这就是日思夜想的效果吧，你的努力是看得见效果的，不要放弃，下一秒你就可以享受到那豁然开朗的喜悦了。

转载于:https://www.cnblogs.com/huyuzhu/p/7259293.html

jquery on()事件相关推荐

js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
jquery的事件对象
jquery的事件对象就是js事件对象的一个封装,就是做了一个兼容性的封装. screenX和screenY 对应屏幕最左上角的值 clientX和clientY 距离页面左上角的位置(忽略滚动条) ...
Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
Java程序员从笨鸟到菜鸟之（九十）跟我学jquery（六）jquery中事件详解
由于jQuery本身就是web客户端的有力帮手,所以事件对于它来说就显得尤为重要了,事件是脚本编程的灵魂. 所以此内容也是jQuery学习的重点. 在传统的JavaScript中,注册一个事件也是非常 ...
从零开始学习jQuery (五) 事件与事件对象
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
深入学习jQuery鼠标事件
前面的话鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuery鼠标事件类型鼠标事件共10类,包括click.contextmenu.dblclic ...
jquery键盘事件全记录
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...
jquery 回车事件
为什么80%的码农都做不了架构师?>>> jquery 回车事件简单地记下jquery实现回车事件,代码如下: 全局: $(function(){ document.onke ...
jQuery 双击事件（dblclick）时，不触发单击事件(click)
在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那 ...
jquery css事件编程尺寸设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

jquery on()事件

语法

原因

解决方法

jquery on()事件相关推荐

最新文章

热门文章