状况之外

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

页面初始化

变量

函数

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

  1. 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;
  1. onclick的用法（jquery、jquery+原生）

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

状况总结

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

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

jQuery的on绑定click和直接绑定click区别的更多相关文章

  1. 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...

  2. jQuery使用（七）：事件绑定与取消,及自定事件的实现原理

    实例方法: on() one() off() trigger() hover() 一.绑定事件与jQuery事件委托 $(selector).eventType(fn); $(selector).on ...

  3. jQuery动态创建的dom对象不能绑定事件的解决方法

    参照网上前辈: 方法一:绑定live事件 live(type,[data],fn) $(selector).live("click",function(){ alert(" ...

  4. jQuery实现当按下回车键时绑定点击事件

    jQuery实现当按下回车键时绑定点击事件 <script> $(function(){ $(document).keydown(function(event){ if(event.key ...

  5. 7-20 jquery遍历节点，bootstrap模态框绑定事件和解绑，mock.js，model.urlroot,id,打基础

    7-19 1:$(event.target).parents().filter("tr").find("host-name") 为什么选择不到别的host-na ...

  6. js 动态绑定事件 on click 完美解决绑定不成功

    动态绑定坑了多少人..... //绑定   $("ol").on("click","li a",function(){ ...   }) / ...

  7. Jquery中绑定事件与普通事件的区别

    (“#panel”).bind(“click”,function(){ 与$(“#panel”).click(function(){ 有什么区别 ? 绑定可以同时加多个事件 如:$(“#panel”) ...

  8. jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同

    jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$(document).on('click','要选择 ...

  9. 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合

    [源码下载] 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合 作 ...

随机推荐

  1. thinkphp5升级版开源框架tpframe v2.1发布

    免费开源框架tpframe是一款以thinkphp5为驱动,在此基础上进行进一步的完善与改进的框架,保持了ThinkPHP5原有的所有特性,优化核心,减少依赖,为个人或企业建站提供高效.快速解决的方案 ...

  2. CentOS 7 设置系统语言为英文并解决 cannot change locale 问题

    首次安装Cent OS 7.6时,将系统语言设置成了中文.后续学习和使用过程中却发现种种不便,甚至有翻译错误.为锻炼自己的英文能力,所以将系统语言设置问英文. 编辑 locale 配置文件,将 LAN ...

  3. 黑客攻防技术宝典web实战篇：攻击访问控制习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 一个应用程序可能通过使用 HTTP Referer 消息头实施访问控制,但它的正常行为并没 ...

  4. Hibernate中的Query对象查询所有记录

    映射文件,核心文件,实体类,工具类的内容都不变直接看测试方法中的代码: package com.yinfu.test; import java.util.List; import org.hibern ...

  5. 使用Git分布式版本控制系统

    GIT(分布式版本控制系统) Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.   Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本 ...

  6. Jquery | 基础 | jQuery表单对象属性过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...

  7. zabbix自定义item(v3.4)

    1 添加user key agent.conf UnsafeUserParameters=1 UserParameter=mysql_if_running,sh /app/zabbix/alertsc ...

  8. Jmeter之一个请求获取上一个请求的参数

    刚开始有这个需求,网上都是一些使用正则表达式的例子,苦于自己看不好正式的表达式,且响应结果稍微变一下,自己就不会写了,于是谷歌上各种搜,也阅读官网上文档,后来发现一个好的插件 Json path Ex ...

  9. 模拟赛01 T3 盖房子

    题面 http://zhengruioi.com/problem/248 题解 三重容斥(说是两重也行吧) 我们来看题目的约束 ①有k个位置不能放(k≤8) ②每行每列至少一个 ③正负对角线至少一个 ...

  10. Four Segments CodeForces - 846C

    题目 题意:sum(l,r)表示数列a中索引为l到r-1(都包含)的数之和(如果l==r则为0).给出数列a,求合适的delim0, delim1, delim2,使res = sum(0, deli ...