唠唠jQ里的on

jQuery

在jQ里，给一个元素加上click等事件我们就会这样写：$('.comment').click(fn),然而，当我们通过ajax动态加载出来的元素,使用此方法后无论怎么点，都没有任何反应，甚是奇怪

于是，我就开始在网上查找资料，渐渐找到了一些思绪，原来上面那种写法只适合于一开始就是在页面上的元素，后来加载的就会GG了，T_T。那我们要怎么解决呢，于是既可以派出我们的.on()了。

我们来看看文档上对on是怎么说的

在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。

它的功能就是绑定事件，其实jquery里还有个.live()的功能是和它差不多的，不过1.7版本后就废弃了.live(),所以我们就接着唠.on()吧

按照网上的来说，给元素用.on()绑定事件就可以么么哒了,像这样$('.comment').on('click',fn),然而我通过js给html动态添加文件后，然并卵！！尼玛坑爹啊！！！! 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
	#div{
		width:100px;
		height:100px;
		background:lime;
	}
</style>
</head>
<body>
	<div id="div"></div>
<script>
$(function(){

 	$('p').on('click',function(){
 	  alert(1)
 	})

 	$('#div').append($('<p>我要弹出1</p>'))
})
</script>
</body>
</html>

总不能放弃咯，，继续解决问题，网上又是一通查找，终于让我找到了，感动到哭T_T

jQuery 使用on绑定动态生成的元素时，不能直接用该对象操作，而是选择其非动态生成的父节点然后再找到本身才能达到效果。

按照他的方法，我把js改成了下面这样：

1
2
3
4
5
6
7
8
9
10
<script>
$(function(){

 	$('#div').on('click','p',function(){
 	  alert(1)
 	})

 	$('#div').append($('<p>我要弹出1</p>'))
})
</script>

结果终于弹出了久违的1，哈哈哈哈哈哈哈哈

注：.on()方法会一直绑定一个元素，，所以不用时要手动用.off()解除事件的绑定

本文标题:唠唠jQ里的on

文章作者:弦冰

发布时间:2016年02月21日 - 21时15分

最后更新:2016年02月21日 - 22时33分

原始链接:http://baidu.com/2016/02/21/唠唠jQ里的on/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录