jquery ajax 中 $(this) 不起作用

时间:2022-06-04 09:38:14

          忍不住要分享一下一个奇怪的现象,那就是$(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里面我们就可以通过这个变量来操作当前元素了。