1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > jQuery 在ajax回调函数中使用$(this)无效不起作的的解决方法

jQuery 在ajax回调函数中使用$(this)无效不起作的的解决方法

时间:2022-12-14 11:37:05

相关推荐

jQuery 在ajax回调函数中使用$(this)无效不起作的的解决方法

jQuery 在ajax回调函数中使用$(this)无效不起作是因为$(this)与ajax的冲突

解决方法一:

在jQuery使用ajax后$(this)失效,原因很简单,$(this)指向的是最近调用它的jquery对象,即$(this)就是表示ajax对象了,解决办法也是很简单,在使用$.ajax({})前将$(this)赋给一个变量后即可在$.ajax({})内使用,平时用$(this)的时候感觉很方便,很爽。例如,我们可以这样轻易获取某个元素的value值,$(this).val();可以这样$(this).HTML()获取某个元素里面的所有html标签内容。但是这一切在ajax里面都不生效。代码如下:

$(".finish").click(function(){

$.ajax({

url:"/index.PHP/Home/MiaoManage/change_status",

type:"POST",

dataType:"json",

data:{plan_id:$(this).attr("mask")},

success:function(re){

alert($(this).html());

}

});

});

上面的代码主要是给 class 为finish的元素绑定一个click(点击)事件。在点击事件里面我们使用了$.ajax;在ajax的success方法里面,我们想要使用alert弹框,弹出finish这个元素内部的html标签。但是我们用$(this)指定finish这个元素,这种用法是错的,是不会生效的。因为在ajax里面不能用$(this)这种用法。代码应该修改如下:

$(".finish").click(function(){

var fh=$(this);

$.ajax({

url:"/index.php/Home/MiaoManage/change_status",

type:"POST",

dataType:"json",

data:{plan_id:$(this).attr("mask")},

success:function(re){

alert(fh.html());

}

});

});

在ajax前面先将$(this)赋值给一个变量,然后在ajax里面我们就可以通过这个变量来操作当前元素了。

$(".operating a.l").live("click",function(){

var obj = $(this);

$.ajax({

url : "/information/picture/delImage",

type : "POST",

dataType :"JSON",

data : "image_url="+$(this).parents().siblings("img").attr("src")+"&article_id="+ARTICLE_ID,

success : function (data) {

if(data.error_code){

infotips(data.msg,$(".submit_tips"), "error");

return false;

}else{

obj.parents(".list").remove();

infotips("删除成功",$(".submit_tips"), "right");

}

}

});

});

解决方法二:

今天在写ajax请求的时候success中代码老是不能正常执行,找了半天原因。代码如下

$.ajax({type: "GET",

url: "/flag/",

data: dat,

success:function(){

$(this).prevAll("p").CSS("text-decoration","line-through");

}

});

最后发现是ajax中的回调函数(success等)直接用this不灵,解决办法是使用bind(this)绑定this到当前事件。

$.ajax({type: "GET",

url: "/flag/",

data: dat,

success:function(){

$(this).prevAll("p").css("text-decoration","line-through");

}.bind(this)

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。