您现在的位置: 365建站网 > 365学习 > jQuery 在ajax回调函数中使用$(this)无效不起作的的解决方法

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

文章来源:365jz.com     点击数:129    更新时间:2018-04-02 13:57   参与评论
jQueryajax回调函数中使用$(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)
 });





如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (129人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------