jquery在的.on()方法用来给元素绑定事件处理函数的，我经常用在两个地方：

  • 给未来的元素绑定事件：我总是这样用：$(document).on('click','#div1',function(){});
  • 给拥有同一个父元素的多个子元素绑定事件。

可以查看以前写的博客：jQuery中对未来的元素绑定事件

先来看一个实例：

在页面A的一个div里动态加载页面B，页面B里的一个div绑定了一个单击事件。

页面A如下：

<body>

<input type="button" name="" id="btn1" value="load含事件的页面B" />

<input type="button" name="" id="btn2" value="load随便一个别的页面" />

<div id="content"  style="height:300px;width:80%;"></div>

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

    $('#btn1').click(function(){

        $('#content').load('B.html');

    })

    $('#btn2').click(function(){

        $('#content').load('justForShowSomething.html');

    })

})

</script>

</body>

</html>

页面B如下：

<style>

.box {width: 200px;height: 50px;background: green;}

.added{background: gray;color:white; }

</style>

</head>

<body>

    <div class='box'></div>

</body>

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

   $(document).on('click','.added',function(){alert('clicked');})

   $('.box').append("<div class='added'>我是用.on方式绑定了事件的节点，click我会有事件</div>");

})

</script>

</html>

运行实例

发现问题：第一次load页面B，单击.added，会alert一次；再次load页面B，单击.added，会alert两次；即使中间load过另一个页面。即页面B多次绑定了相同的点击事件。

效果同下面这样是一样的：

$('#btn1').click(function(){alert(1);})
$('#btn1').click(function(){alert(2);})
$('#btn1').click(function(){alert(3);})
//如此这般，单击btn1，会依次弹出1、2、3

上述问题就算不理解是怎么回事也可以通过每次绑定事件前先解除事件来解决：$(document).off('click','.added');

本来我认为每次重新加载页面B时，由于之前的.added节点不存在了，自然之前绑定的事件也就不存在，奇怪为什么事件还会保留？原因是没有理解.on()用法。

实例中：$(document).on('click','.added',f)事件并不是绑定到.added元素上，而是绑定到document对象上（所以.on()才能给未来的元素绑定事件）。单击.added时因为会事件冒泡到document从而触发事件。load的页面B中的$(document)获取的其实是页面A的document对象（如果页面B是嵌入到iframe标签中，则页面B中的$(document)是指它自己的document对象），所以多次加载页面B的话，就会给页面A的document对象重复注册事件。

解决方法：把$(document).on('click','.added',f)中的document换成自己页面里的一个已经存在的父节点就可以了。这样就可以每次重新load页面时，由于之前的那个父节点不存在了，自然之前绑定的事件也就不存在。

如页面B中修改为：

 $('.box').on('click','.added',function(){alert('clicked');})

理解jquery的.on()方法的更多相关文章

  1. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  2. 深度理解Jquery 中 scrollTop() 方法

    这是工作遇到scrollTop() 方法.为了强化自己,把它记录在博客园当中. 下面就开始scrollTop 用法讲解: scrollTop() 定义和用法 scrollTop() 方法设置或返回被选 ...

  3. 深入理解jQuery、Angular、node中的Promise

    最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...

  4. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  5. jquery的ready方法（DOM是否加载完）详解与使用

    jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:

  6. 深入分析，理解jQuery.Deferred源码

    前言: 如果你对jQuery.Callback回调对象不了解,或者只掌握其方法,但是没有通过阅读源码理解,可以先阅读 前一章jQuery.Callbacks源码解读二,因为只有完全理解jQuery.C ...

  7. 解析jQuery中extend方法--源码解析以及递归的过程《二》

    源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...

  8. jQuery常用工具方法

    前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...

  9. 从html页面加载顺序来更好的理解jquery初始化

    一,html页面加载顺序 1,用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件:2,浏览器开始载入html代码,发现<head>标签内 ...

随机推荐

  1. Serializable序列化

    对象的输入输出流 package file; import java.io.File; import java.io.FileInputStream; import java.io.FileOutpu ...

  2. Spark Streaming 数据接收过程

    SparkStreaming 源码分析 一节中从源码角度,描述了Streaming执行时代码的调用过程.下边就接收转化阶段过程再简单分析一下,为分析backpressure作准备. SparkStre ...

  3. 转：pthread_detach()函数

    创建一个线程默认的状态是joinable. 如果一个线程结束运行但没有被join,则它的状态类似于进程中的Zombie Process,即还有一部分资源没有被回收(退出状态码). 所以创建线程者应该调 ...

  4. JBOSS尝鲜

    环境搭建:1. jdk-6u16-windows-i586.exe2. jboss-5.1.0.GA-jdk6.zip JDK安装: 安装过程很简单,应该都知道怎么安装软件....安装完JDK后,需要 ...

  5. use "man rsyslogd" for details. To run rsyslog interactively, use "rsyslogd -n"to run it in debug mo

    zjtest7-frontend:/root# service rsyslog start Starting system logger: usage: rsyslogd [options] use ...

  6. CSS3/HTML5实现漂亮的分步骤注册登录表单

    分步骤的登录注册表单现在也比较多,主要是能提高用户体验,用户可以有选择性的填写相应的表单信息,不至于让用户看到一堆表单望而却步.今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单,外 ...

  7. red-hat6.5 yum 源配置，cloud-init 安装 This system is not registered to Red Hat Subscription Management. You can use subscription-manager to register

    This system is not registered to Red Hat Subscription Management. You can use subscription-manager t ...

  8. 红领：挺进高端 青岛财经日报－htmlmainVerName

    红领:挺进高端 青岛财经日报-htmlmainVerName 红领:挺进高端

  9. jetty插件配置

    1.jetty maven 插件启动设置: Base directory:${project_loc} Goals:clean -Djetty.port=8080 jetty:run 2.jetty ...

  10. C#系列教程——switch定义及使用

    代码如下: using System; class Switch_Test { static void Main() { Console.WriteLine("box sizes: 1=Sm ...