jQuery的on绑定click和直接绑定click区别

状况之外

在之前的公司并没有遇到这个问题，也就没有深究。直到自己换了现在的公司，刚来第二天就开始写别人写到一半的项目，很无奈，不是原生就是jquery，由于项目急，已经来不及切换框架重新布局，只能继续了。

状况之中

到处都是列表，到处都是js创建的动态页面，好吧，那我也继续吧，突然，意外发生了。我绑定的click事件无效。

状况-解决呗

当时知道的原因是动态创建的元素在初始化的时候还没有，那我绑定的事件怎么可能绑定的上嘛（当时还不知道直接绑定和通过on()绑定click的区别，也不知道on('click',param，param,callback)下面介绍的用法）

<p>解决方法


$("#list").on('click',function(e){var ev = e || window.event;var target = ev.target || ev.srcElement;if (target.nodeName.toLowerCase() == 'a' &amp;&amp; target.className=='reset') {msgconfirm('','是否确认重置密码？',function(){ajax('/user/reset?id=' target.type,'','get','json',null,function(data){var userObj=data.tUser;tipalert('',{data:'密码重置成功',username:userObj.account,password:userObj.passWord,uKey:userObj.key.replace(/\,/img,'&lt;/br&gt;')},'../../images/ok-ico.png',function(){window.location.reload();})})})}})

jquery 原生，我也不想的，可是我又找不到别的解决方案，解决就OK了，虽然不好看，性能也不是太好，但是我也没有深究。

。。。。。。。。。。

状况之后的好久好久以后

那就是现在啦，看到别人的代码


$("body").on("keyup","#userId,#password",function(){if(event.keyCode==13){loginFunc();}});

我真的想对自己说“what are you 弄啥嘞”。
当时真的是没想那么多啊。在网上查了一下都说on('click',callback)适用于动态元素，click适用于静态元素。但是并没有说为什么。上面废话一大堆，下面我说一下我的理解吧。

先说一下js中的预解释

页面初始化

变量

函数

看完预解释就说一下今天的主题吧

on('click',callback)和click在初始化时的区别
1. 绑定静态元素：元素存在，预解释OK，所以是没啥区别啦；
2. 绑定动态元素：元素不存在，预解释，元素都找不到，咋预解释啊，所以不管是on()还是click()都没有办法；
3. 绑定静态元素实现动态元素的事件绑定：


&lt;html&gt;&lt;div class="test"&gt;&lt;button class="new" id="newon"&gt;NewOn&lt;/button&gt; &lt;button class="new" id="newclick"&gt;NewClick&lt;/button&gt;&lt;ul class="li"&gt; &lt;li&gt;原先的HTML元素on&lt;button class="deleteon"&gt;Delete&lt;/button&gt;&lt;/li&gt; &lt;li&gt;原先的HTML元素click&lt;button class="deleteclick"&gt;Delete&lt;/button&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;script&gt;$("#newclick").click(function(){ $(".li").append('&lt;li&gt;动态添加的HTML元素click&lt;button class="deleteclick"&gt;Delete&lt;/button&gt;&lt;/li&gt;'); });$("#newon").click(function(){ $(".li").append('&lt;li&gt;动态添加的HTML元素on&lt;button class="deleteon"&gt;Delete&lt;/button&gt;&lt;/li&gt;'); });$(".delete").click(function(){ $(this).parent().remove(); }); //删除选中元素$(".li").on('click', ".deleteon", function(){$(this).parent().remove(); })//看看，删除不了吧$(".deleteclick").click(function(){ $(this).parent().remove(); });&lt;/script&gt;&lt;/html&gt;

onclick的用法（jquery、jquery 原生）

关于用法，上面已经介绍了，这个也是我今天才知道的，原来在绑定事件的时候就可以加入元素，而我竟然转到了原生，一看就很菜，小白啊小白。

状况总结

动态元素绑定用on()，静态元素绑定两者都可以，为了代码的统一还是都用on()吧，切记，on('click',param1,param2,callback)可以筛选元素哦！！！

原文地址：https://segmentfault.com/a/1190000016713781

更多专业前端知识，请上【猿2048】www.mk2048.com

jQuery的on绑定click和直接绑定click区别相关推荐

jQuery 绑定3种鼠标事件 click(鼠标点击)，mouseover(鼠标移入)，mouseout(鼠标移开)
1 click() 说明:鼠标点击时触发click事件. 语法: $(selector).click(function1); 实例: 文本框绑定click事件. $(function(){$(&quo ...
jQuery源码解析之on事件绑定
本文采用的jQuery源码为jquery-3.2.1.js jquery的on方法用来在选定的元素上绑定一个或多个事件处理函数. 当参数selector存在时,通常会用来对已经存在的元素或将来即将添加 ...
php js获取表单内容,jquery form表单获取内容以及绑定数据_javascript技巧
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...
js 动态绑定事件 on click 完美解决绑定不成功
动态绑定坑了多少人..... //绑定 $("ol").on("click","li a",function(){ ... }) / ...
HTML——jQuery之事件绑定、取消事件绑定及事件委托
事件绑定事件绑定有两种方法:分别是:.click() 和.on() <!DOCTYPE html> <html lang="en"> <head&g ...
背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换...
背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换原文:背水一战 Windows 10 ...
Day20：绑定方法与非绑定办法、多态和多态性
一.绑定方法与非绑定方法类中定义的函数分成两大类: 1.绑定方法(绑定给谁,谁来调用就自动将它本身当作第一个参数传入): 1. 绑定到类的方法:用classmethod装饰器装饰的方法. 为类量身定 ...
v-bind单向绑定与v-model双向绑定
Vue.js 最显著的特点就是响应式和数据驱动,也就是将Model和View(View在下面的图示中)进行单向绑定或者双向绑定. Vue.js主要有三种数据绑定形式,并且都是基于单向绑定和双向绑定. ...
Vue---v-bind数据绑定、事件绑定、v-for循环绑定数据、v-model数据绑定、过滤器filters、v-show、v-if及练习（demo：切换小球颜色、获取数据进行展示、显示和隐藏）
一.如何创建一个Vue实例*******************************************************{{}} 在vue中是一个展示数据的方式一个页面中可以有多个vu ...

jQuery的on绑定click和直接绑定click区别

状况之外

状况之中

状况-解决呗

状况之后的好久好久以后

先说一下js中的预解释

看完预解释就说一下今天的主题吧

状况总结

jQuery的on绑定click和直接绑定click区别相关推荐

最新文章

热门文章