在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 | <!DOCTYPE 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()
解除事件的绑定