---恢复内容开始---

今天我们来说说关于JQuery中事件绑定中on绑定的一些小问题，直接上代码了，大家拷下去就可以用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: ;

            padding:

        }

        li {

            list-style: none

        }

        .ul_one,

        .ul_two {

            overflow: hidden;

            float: left;

            margin-left: 400px;

            margin-top: 200px;

        }

        .ul_one>li,

        .ul_two>li {

            text-align: center;

            height: 40px;

            width: 120px;

            background-color: yellow;

            border: 1px solid gray;

            line-height: 40px;

        }

        .ul_two>li {

            background-color: green;

        }

        p{color: green;font-size: 20px;clear:both;margin-left: 300px;margin-top: 20px}

    </style>

</head>

<body>

    <ul class="ul_one">

        <li>a1</li>

        <li>a2</li>

        <li>a3</li>

        <li>a4</li>

    </ul>

    <ul class="ul_two">

        <li>b1</li>

        <li>b2</li>

        <li>b3</li>

        <li>b4</li>

    </ul>

    <p>当我们在on函数的参数里面传入了子元素的参数  on的绑定机制类似于事件绑定，所以我们才不能移除某个子元素的事件</p>

    <p>而当我们不传入子元素的参数，on的绑定机制相当于循环绑定，所以此时我们可以移除某个子元素的事件</p>

    <p>注意：需要引入JQuery,打开控制台看输出，打开源码看注释</p>

</body>

</html>

<script src="jquery-1.11.3.js"></script>

<script>

    //JQuery中on绑定的一些小坑

    // 然后用on来对两个ul进行绑定

    // 这种方法将第二个参数填入   即将子元素参数填入

    $(".ul_one").on("click", "li", function () {

        console.log(this)

        //可以看到事件已经绑定上

    })

    //现在尝试给第一个子元素移除事件

    $(".ul_one").children().eq().off("click");

    //    你会发现根本移除不掉

    // 可以对未来元素实现绑定

    var newli1 =  $("<li>a未来元素</li>");

    $(".ul_one").append(newli1)

    //    由于on的第二个参数是可选参数我们来试试换种写法

    $(".ul_two>li").on("click", function () {

        console.log(this)

    })

    // 来，我们现在移除某个子元素的事件

    $(".ul_two").children().eq().off("click");

    //你会发现现在可以移除掉第一个子元素的事件

    //不能对未来元素实现绑定

    var newli2 =  $("<li>b未来元素</li>");

    $(".ul_two").append(newli2)

    // 重要   重要

    // 那为什么会造成这种情况呢

    // 当我们在on函数的参数里面传入了子元素的参数  on的绑定机制类似于事件绑定，所以我们才不能移除某个子元素的事件，能对未来元素实现绑定

    // 而当我们不传入子元素的参数，on的绑定机制相当于循环绑定，所以此时我们可以移除某个子元素的事件,但不能实现对未来元素实现绑定

</script>

---恢复内容结束---

---恢复内容结束---

Jquery中on绑定的一些小坑的更多相关文章

  1. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

  2. 关于JQuery中$.data绑定数据原理或逻辑

    问题: JQuery中,对于.data([key],[value])函数,当使用其进行数据绑定时,假设要绑定的数据是“引用数据类型”,也就是对象:那么.data函数绑定的是该对象的副本还是该对象的一个 ...

  3. C#中的Infinity有个小坑

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 昨天家里有事,上网也不方便,就没有推送文章.今天很累,也不长篇大论了.简单介绍一下最近遇到的 ...

  4. !!!jQuery中事件绑定 推荐使用.delegate()或者live()

    jQuery中的.bind()..live()和.delegate()之间区别分析 参考:http://www.jb51.net/article/27309.htm DOM树   首先,可视化一个HM ...

  5. Python中需要注意的一些小坑

    Python小知识 # a = a + b /a += b 有时是不一样的​ a=[1,2,3] b = a a = a + [4,5,6] ​ # a=[1,2,3] # b = a # a += ...

  6. 关于jquery中on绑定click事件在苹果手机失效的问题(巨坑啊)

    用一个div当做了一个按钮来使用. <div class="button"> <div class=" next_button button_left ...

  7. jquery中on绑定click事件在苹果手机失效问题解决（巨坑啊）

    描述:用一个div写一个按钮,并给这个按钮添加一个点击事件,在安卓机器上一切正常,但是在苹果机型上会出现点击事件失效. <!DOCTYPE html> <html lang=&quo ...

  8. jquery中on绑定事件

    之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发 eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 ...

  9. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

随机推荐

  1. Java零基础教程（二）基础语法

    Java 基础语法 一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如 ...

  2. 连接企业的人、事、物、知识--企业IM的第三类生存方式

    企业IM现状:尴尬 传统的企业IM在完成聊天.群组.文件传输.音频会话等传统IM功能后,发现自己陷入了尴尬的境地,因为功能的“同质化”,这些功能微信.QQ也有啊,其他IM厂商也有.于是IM厂商开始思考 ...

  3. iOS-IAP内购的那些事（iOS内购漏单的问题）

    前言 说起内购,其实挺令开发者厌烦的,原因呢,先不说漏单的问题,首先苹果要扣除30%的销售额哦,可恨不?(我觉得可恨),有些想办法先隐藏掉第三方支付(支付宝.微信等),等项目上线了,再跳过内购使用第三 ...

  4. POJ 2612

    #include<iostream> #include<stdio.h> #include<algorithm> #define MAXN 11 using nam ...

  5. MySQL高可用架构-MMM安装教程

    安装指南: 一.架构以及服务器信息 基本安装包含至少2个数据库服务器和1个监视服务器.本例中使用2个监视服务器和5个数据库服务器(服务器系统为CentOS 7) 用途 IP 主机名 Server-id ...

  6. python使用(二)

    Python中的集合类型. 1.list_option.py 2.listsplit_option.py 3. dic_option.py 4.iter_option.py 1.list_option ...

  7. 基于 WiFi ( Wireless Fidelity) 的室内定位技术

    系统的拓扑结构 基于信号强度的定位技术(RSSI, Received Signal Strength Indication) 无线信号的信号强度随着传播距离的增加而衰减,接收方与发送方离得越近, 则接 ...

  8. 【java初探】——格式化字符串

    String 类的静态方法format()方法用于创建格式化字符串,format()方法有两种重载形式: format(String fromat,Object...args) 该方法使用指定的格式字 ...

  9. VIM学习网址和资料收集

     摘要:这篇博客主要收集一些学习VIM的好网址和资料 娄老师的一篇VIM 原文地址:http://www.cnblogs.com/rocedu/p/6012444.html Github上VIM的学习 ...

  10. Leetcode 763. Partition Labels

    思路:动态规划.对于属于coins的coin,只要知道amount-coin至少需要多少个货币就能表示,那么amount需要的货币数目=amount-coin需要的货币数目+1:如果amount-co ...