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

最新推荐文章于 2024-04-19 15:57:39 发布

前端老码农

最新推荐文章于 2024-04-19 15:57:39 发布

阅读量317

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hhh1hc1k1h0j&title=jQuery%E7%9A%84on%E7%BB%91%E5%AE%9Aclick%E5%92%8C%E7%9B%B4%E6%8E%A5%E7%BB%91%E5%AE%9Aclick%E5%8C%BA%E5%88%AB

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

状况之外

在之前的公司并没有遇到这个问题，也就没有深究。直到自己换了现在的公司，刚来第二天就开始写别人写到一半的项目，很无奈，不是原生就是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;