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

jayce 发布于2019-08-23 12:23 / 1235人阅读

摘要：我绑定的事件无效。状况总结动态元素绑定用，静态元素绑定两者都可以，为了代码的统一还是都用吧，切记，可以筛选元素哦

状况之外

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

状况之中

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

状况-解决呗

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

解决方法

$("#list").on("click",function(e){
        var ev = e || window.event;
        var target = ev.target || ev.srcElement;
        if (target.nodeName.toLowerCase() == "a" && 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,"
")
                    },"../../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在初始化时的区别

绑定静态元素：元素存在，预解释OK，所以是没啥区别啦；

绑定动态元素：元素不存在，预解释，元素都找不到，咋预解释啊，所以不管是on()还是click()都没有办法；

绑定静态元素实现动态元素的事件绑定：



    
         
        
         
            原先的HTML元素on 
            原先的HTML元素click

onclick的用法（jquery、jquery+原生）

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

状况总结

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98433.html

JQuery基础修炼-事件篇

摘要：目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中，最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作，另一个方法是方法用于监听用户双击操作。目录第1章事件介绍第2章鼠标事件第3章表单事件第4章键盘事件第5章事件的绑定和解绑第6章事件对象的使用第7章自定义事件 cli...

yy13818512006 2019-08-02 15:55 评论0 收藏0
JQuery基础修炼-事件篇

摘要：目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中，最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作，另一个方法是方法用于监听用户双击操作。目录第1章事件介绍第2章鼠标事件第3章表单事件第4章键盘事件第5章事件的绑定和解绑第6章事件对象的使用第7章自定义事件 cli...

hikui 2019-08-19 18:25 评论0 收藏0
jQuery源码解析之你并不真的懂事件委托及target和currenttarget的区别

摘要：源码源码行被点击了点击了，即委托的事件被点击了优先添加委托，再添加其他即委托在上的事件数量在下标为的位置插入委托事件解析可以看到，是优先添加委托事件，再添加自身事件，触发事件的时候也是按这个顺序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：请先回顾下我之前写的一篇文章：JavaScript之事件委...

khs1994 2019-08-23 18:01 评论0 收藏0
jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

摘要：事件的绑定和解绑的多事件绑定之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。由于浏览器事件冒泡特性，可以在触发时把这个事件往上冒泡到上，因为上绑定事件响应，所以能触发这个动作。事件的绑定和解绑 on()的多事件绑定之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理...

niuxiaowei111 2019-08-22 10:53 评论0 收藏0