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. 解决VS2013中“This function or variable may be unsafe”的问题

    1.在VS2013中编译代码时出现如上错误信息,下面就介绍下如何解决This function or variable may be unsafe的问题. 2.用VS2013打开出现错误的代码文件 3 ...

  2. Ionic 测试针对Andorid平台

    环境准备: (1)nodejs环境以及配置完成: y@y:~$ node -v v0.12.2 (2)Android SDK 环境变量已经配置完毕: export ANDROID_SDK=/home/ ...

  3. poj 1819 Disks

    http://poj.org/problem?id=1819 #include <cstdio> #include <cstring> #include <cmath&g ...

  4. qt-solutions提供了8个开源项目

    其实这是官方提供的源代码,至于为什么会另建项目,而没有整合到QT项目里去,我猜可能有2个原因: 1. 这几个项目本身不完善,并且也不是QT项目的核心,因此没有必要花精力去完善 2. 一定程度上可以维护 ...

  5. BZOJ1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富

    1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 459  Sol ...

  6. 【转】java读写二进制文件的解决方法

    原文网址:http://www.jb51.net/article/36940.htm 接口:Writerable 复制代码代码如下: package com.geoway.pad.common; im ...

  7. 【转】Android UI系列-----时间、日期、Toasts和进度条Dialog

    原文网址:http://www.cnblogs.com/xiaoluo501395377/p/3421727.html 您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注 ...

  8. java与数据结构(6)---java实现链栈

    栈之链式存储结构链栈 链栈 栈的链式存储结构成为链栈.链栈是没有头结点,头结点就是栈顶指针top. 代码结构 package list; public interface Stackable;公共接口 ...

  9. zabbix discovery

    preface(见面礼): 仅扫tcp端口: netstat -tnlp|egrep -i "$1"

  10. Hadoop2.4.1 使用MapReduce简单的数据清洗

    package com.bank.service; import java.io.IOException;import java.text.ParseException;import java.tex ...