理解jquery的.on()方法

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

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

先来看一个实例：

在页面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');})

Added

理解jquery的.on()方法