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

今天我们来说说关于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. tomcat设置默认欢迎页、server.xml配置文件中的标签理解

    一:要求:输入网址,不加文件名便可以访问默认页面 (1)项目中只有静态文件 方法:更改tomcat下的conf目录下的web.xml文件,如下图: <welcom-file-list>元素 ...

  2. flask框架--cookie，session

    今天我又给大家分享一下怎么用flask框架来实现像淘宝购物车一样存储数据,并且把存储的数据删除,这个方法可以用两个方法都可以做成,一个是cookie,另一个是session. session是依赖于c ...

  3. 【xsy2913】 enos 动态dp

    题目大意:给你一棵 $n$个点 以 $1$为根 的树,每个点有$ 0,1,2 $三种颜色之一,初始时整棵树的颜色均为 $0$. $m$ 次操作, 每次操作形如: 1 x y c : 将 $x$到$y$ ...

  4. mac操作记录

    1.mac'主目录地址' 类似我的电脑 点桌面空白处按shift+command+C, 双击Macintosh HD图标后就能看见system文件夹 2.做excel表格,下载Microsoft Of ...

  5. windows线程退出的方法

    线程的handle用处: 线程的handle是指向“线程的内核对象”的,而不是指向线程本身.每个内核对象只是内核分配的一个内存块,并且只能由内核访问.该内存块是一种数据结构,它的成员负责维护对象的各种 ...

  6. CentOS 7.5 安装与配置 Percona Server 5.7

    个人比较喜欢 MYSQL 的轻量,今天花了一点时间把阿里云上的 MYSQL5.7 换成了 Percona-Server .Percona 是一个开源的 MySQL 衍生版,TokuDB 的数据库引擎使 ...

  7. 第一个 smarty 程序

    原来使用普通的 PHP 代码,只需要一个文件,就可以完成功能. 而使用了 smarty后,会分成两个文件来完成,一个是模板文件,用于显示内容,一般后缀名为 *.tpl (但实际上任何后缀名都可以,建议 ...

  8. 关于SAN和NAS的区别-转

    什么是SAN与NAS By  王文平 发表于 2006-7-10 18:03:53  NAS和SAN字面上相似,并且都是新型数据存储模式,但这二者是完全不同的,针对不同方向的技术. 什么是SAN(St ...

  9. com.alibaba.fastjson.JSON对类对象的序列化与反序列化

    1. 目标 把类的对象存储到字符串可存储 2. 类定义 public interface JsonInterface { } mport com.alibaba.fastjson.JSON; impo ...

  10. 人工智能日常应用举例-nlp+视觉（听说看）