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

今天我们来说说关于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. navicat的下载、激活

    1.安装   navicat  (自己可以去下载最新版本),双击安装: 2.激活  navicat , 双击运行即可激活成功! 3.简单快捷高效!

  2. 人工智能-机器学习之seaborn（读取xlsx文件，小提琴图）

    我们不止可以读取数据库的内容,还可以读取xlsx文件的内容,这个库有在有些情况还是挺实用的 首先我们想读取这个文件的时候必须得现有个seaborn库 下载命令就是: pip install  seab ...

  3. postgresql-pg_prewarm数据预加载。

    pg_prewarm数据预加载. http://francs3.blog.163.com/blog/static/405767272014419114519709/   https://www.kan ...

  4. Flask-WTF

    Flask-WTF 提供了简单地 WTForms 的集成. 官方文档:http://www.pythondoc.com/flask-wtf/index.html 功能 集成 wtforms. 带有 c ...

  5. (转)percona的安装、启动、停止

    原文:https://blog.csdn.net/tanliqing2010/article/details/78758878 socket=/percona/3307/data/mysql.sock ...

  6. hadoop2.7的目录结构

    1.$HADOOP_HOME/bin目录下文件及作用 文件名称 说明 hadoop 用于执行hadoop脚本命令,被hadoop-daemon.sh调用执行,也可以单独执行,一切命令的核心 2.$HA ...

  7. JVM 监控工具 jstack 和 jvisualvm 的使用

    Java线程状态 线程的五种状态 * 新建:new(时间很短) * 运行:runnable * 等待:waitting(无限期等待),timed waitting(限期等待) * 阻塞:blocked ...

  8. logstash安装与logstash-input-jdbc插件使用

    ElasticSearch的索引可以手动添加索引的,就是类似下面这样添加的 PUT /movies/movie/1 { "title": "The Godfather&q ...

  9. 自己实现IOC过程

    阅读了<架构探险>这本书之后简单梳理一下自己实现IOC的基本流程 首先要自己定义一个注解 import java.lang.annotation.ElementType; import j ...

  10. 面试：C++String类实现

    #include <iostream> #include <cstring> using namespace std; class CString { private: cha ...