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. javaWeb实现使用邮箱邮件找回密码功能

    JSP+Jmail+JavaBean 发邮件(转)2010-08-23 18:052007年04月14日 14:32/* * SendMail.java * * Created on 2007年3月3 ...

  2. c++中构造函数 、析构函数的作用域详解

    我们知道,在c++中,析构函数是在函数作用域尾部执行析构函数,从而释放对象,但是有一种情况下,析构函数作用域发生变化,请看下面的例子,定义了一个Stock类,Stock类存放在stock.h中,主调用 ...

  3. LeetCode_Single Number II

    Given an array of integers, every element appears three times except for one. Find that single one. ...

  4. oschina大数据开源软件

    Hadoop 图形化用户界面 Hue 大数据可视化工具 Nanocubes 企业大数据平台 RedHadoop 大数据查询引擎 PrestoDB Hadoop集群监控工具 HTools 安全大数据分析 ...

  5. C#中判断字符串是否中文的方法

    public bool IsChinaString(string CString) { bool BoolValue = false; ; i < CString.Length; i++) { ...

  6. 为什么使用Redis

    原文地址:http://igoder.iteye.com/blog/1969848 先解释一下软件编程中常见的一些概念: 抽象先于具象.这个抽象并非虚无的抽象,而是指事物尚未分化为具象之前的那个前体存 ...

  7. 树形dp入门练习（hdu1011+hdu1061）

    hdu1011 和 hdu1561类似,给定每个节点的花费以及价值,并且子节点必须在父亲节点取到以后才可以被取到 相当于是在树上进行的01背包 dp时考虑每一个子树 root和它的每一个儿子,状态转移 ...

  8. 寻找第K小元素

    要在一个序列里找出第K小元素,可以用排序算法,然后再找.可以证明,排序算法的上界为O(nlogn). 在这里,给出两种可以在线性时间内找出第K小元素的方法. 方法1: (1) 选定一个比较小的阈值(如 ...

  9. GF(2^8)生成元

    目的是找出所有GF(2^8)的生成元. 方法很简单,从2开始遍历,将每个元素都与自身相乘255次,看是否能得到1~255.若能,则是生成元. #include<iostream> #inc ...

  10. Freemarker生成静态代码实例

    1.static.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ...