jquery 动态增加的html使得click事件失效

文章讲述了在使用Ajax动态加载数据后,绑定在.item类上的click事件失效的两种解决方案。一种是使用jQuery的live()函数,它能处理当前及未来存在的元素。另一种是使用on()方法,可以在父元素或body上绑定事件,以监听动态添加的子元素的点击事件。

使用ajax读取数据列表,,class为“item”,用$(“.item”).click(function(){ //do selting}),后面通过ajax加载进来的列表中的item按钮,点击事件会失效。

解决方法:

最简单的方法就是直接在标签中写οnclick=””,但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件。

$("#itema").click(function(){

$("#ul").append('

xxxx'); //动态向ul的末尾追加一个新元素

});

click点击事件失效的解决方法一:使用live

live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。

通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

实现如下:

$('.item').live('click', function(){

alert('OK');

});

方法二:使用on

可以通过on方法绑定事件,可以绑定到它的父级或者body中,实现如下:

$("#item").on('click','.colabc',function(){

alert('OK')

});

或者:

$("body").on('click','.colabc',function(){

alert('OK')

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值