当前位置: 秋叶网络博客 前端编程 ◊ JQ的ajax点击事件只执行第一次的解决方案

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(){...})

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/377.html
目录: 前端编程 | 标签: ajax, 点击事件 | 23672次阅读