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

今天我们来说说关于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. javap 反汇编class文件

    用法: javap 参数 class文件路径 其中, 可能的选项包括: -help --help -? 输出此用法消息 -version 版本信息 -v -verbose 输出附加信息 -l 输出行号 ...

  2. Smart/400开发上手2: COBOL批处理程序处理过程

    开发目的:1.建立DB2数据库表:2.建立逻辑视图:3.通过Cobol程序将一个源数据表的数据通过一定公式计算后导出到另一个目的数据库表源数据表:TIM3PF目的数据表:TIM4PF4.在AS400中 ...

  3. Vue2.5开发去哪儿网App 第三章笔记 上

    1.  vue 生命周期函数 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 ...

  4. ajex 相关参数

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  5. 13、最新安卓Xamarin绑定相关填坑之旅

    今天群里面有兄弟伙说第三方库用不起.说实话在我觉得第三方库能成功的几率大于90% 除了极少数恶心的库以外. 绝大部分第三方库都还是可以绑定好的 https://github.com/youzan/Yo ...

  6. docker学习实践之路[第四站]利用pm2镜像部署node应用

    拉取keymetrics/pm2-docker-alpine:8镜像 docker pull keymetrics/pm2-docker-alpine: [8]为node镜像的版本号: 建立Docke ...

  7. 课程一(Neural Networks and Deep Learning)，第三周（Shallow neural networks）—— 1、两层神经网络的单样本向量化表示与多样本向量化表示

    如上图所示的两层神经网络, 单样本向量化:                                                                                ...

  8. python中文画图显示乱码解决办法

    最近使用notebook Python中的matplotlib作图,发现中文设置的坐标标签和title都显示为乱码,用了网上的许多教程都不管用,嘴后解决的方式是设置下述的两行即可搞定: plt.rcP ...

  9. 理解web service 和 SOA

    什么是SOA? SOA的全称为Service Oriented Architecture,即面向服务架构.这是一种架构理念.它的提出是在企业计算领域将耦合的系统划分为松耦合的无状态的服务.服务发布出来 ...

  10. Intellij IDEA Spring Boot 项目Debug模式启动缓慢问题

    问题 Intellij IDEA Spring Boot 项目Debug模式启动缓慢 环境 os: windows10 idea :2018.1 解决方法 去除所有断点就正常了,很诡异,原因未知.