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. <Pro .NET MVC4> 三大工具之依赖注入神器——Ninject

    这篇内容是对<Pro .NET MVC4>一书中关于Ninject介绍的总结. Ninject是.NET MVC的一款开源的依赖注入工具. 使用场景:当MVC项目中使用了依赖注入技术来给程 ...

  2. 编写 capture filters

    编写 capture filters 如有转载,请在转载前给我提一些建议.谢谢. 百度查不到资料,为无能的百度搜索增加点营养的料. 读 http://www.n-cg.net/CaptureFilte ...

  3. Oracle_OCP课程实验学习

    Linux启动oracl.查看lsnrctl状态,然后启动监听start.sqlplus / as sysdba 启动数据库.conn sys/jxsrpv as sysdba .startup Ad ...

  4. DES加解密实现方式

    private static readonly byte[] _keys = { 0x22, 0x84, 0x56, 0x98, 0x90, 0xAB, 0xpD, 0xEF }; private s ...

  5. hdu 3435 A new Graph Game

    http://acm.hdu.edu.cn/showproblem.php?pid=3435 #include <cstdio> #include <iostream> #in ...

  6. 利用ftrace跟踪内核static tracepoint——实例writeback event

    摘要:和很多linux内核子系统一样,static tracepoint有很多层次,其中某个层次都展示给不同层次的开发者来满足他们的不同需求.关于linux tracepoint的详细信息,我们可以在 ...

  7. Linux系统编程（27）——线程控制

    进程在各自独立的地址空间中运行,进程之间共享数据需要用mmap或者进程间通信机制,那么如何在一个进程的地址空间中执行多个线程呢.有些情况需要在一个进程中同时执行多个控制流程,这时候线程就派上了用场,比 ...

  8. html+css显示代码书写版式

    由于要显示行数,所以需选用html的列表标签ol,以下代码可以显示代码书写版式的效果: <style> .code-part { background: yellow; } .code-p ...

  9. JS学习之道：javascript keycode大全

    keycode    8 = BackSpace BackSpace keycode    9 = Tab Tab keycode   12 = Clear keycode   13 = Enter ...

  10. 鼠标点击DIV后，DIV的背景变色（js）

    <!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs ...