JQ的ajax点击事件只执行第一次的解决方案
作者：秋了秋 发表时间：2015年08月05日
最近在项目中用到了ajax的方法，在中途遇到了一个小障碍，ajax请求是正确的，可是点击事件只执行第一次点击，第二次点击的时候就无效了，只有刷新页面之后才可以点击，点击之后再点击还是无效。代码如下：
$(".ttx").click(function(){
var abc=$(this).attr('id');
$.ajax({
url: 'user.php?act=tuan_check',//请求地址
type: 'GET',//用get方式获取
dataType: 'html',//请求数据类型为html
data: {user_id:abc,pass:"yes"},//重要：请求地址后面所带参数，格式/user.php?act=tuan_check&user_id=abc&pass=yes
contentType: "application/json; charset=utf-8",//请求内容格式
timeout: 10000,//超时10秒后报错
success: function(data){//请求成功后执行的函数，可以用alert(data);看看请求的数据以查看通过率
$('#'+abc).removeClass('ttx').addClass('bfo2').html("已通过");
},
error: function(err){//请求失败后执行的函数
alert("正在请求，请稍候...");
}});})
这个也是标准的ajax请求后台数据代码，进行前台会员审核通过与不通过的ajax操作，大家参考一下。只是点击事件出现了问题，其实是这种click写法对动态写入的dom无效，因为第一次点击的时候我改变了class值，所以单纯的click无法找到更改的class，所以只适合单一的点击事件，修复后代码如下：
$(".ttx").live('click',function(){
var abc=$(this).attr('id');
$.ajax({
url: 'user.php?act=tuan_check',
type: 'GET',
dataType: 'html',
data: {user_id:abc,pass:"yes"},
contentType: "application/json; charset=utf-8",
timeout: 10000,
success: function(data){
$('#'+abc).removeClass('ttx').addClass('bfo2').html("已通过");},
error: function(err){
alert("正在请求，请稍候...");
}});})
扩展阅读：jq的点击事件大全：
1.bind绑定事件 $("#qiuye").bind('click',function(){...});
绑定事件，可绑定多个事件： $('#qiuye').bind('click mouseover',function(){...});
可绑定多个处理函数： $('#qiuye').bind({ click:function(){...}, mouseover:function(){...} })
2.One一次性点击，只执行第一次点击，第二次点击将不再起作用，除了刷新页面。 $('#qiuye').one('click',function(){ alert('a'); })
3.live可绑定动态添加的html元素，用js写入的文档一样可以识别。 $('#qiuye').live('click,function(){...})
2
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/377.html