使用jQuery更新.follow按钮data-action属性失效，求排查方案

嘿，这个问题我太熟了！核心问题出在AJAX回调函数里的this指向已经不是你点击的.follow元素了，所以你修改data-action的操作根本没作用在目标元素上。

为什么会这样？ #

在jQuery的AJAX默认配置里，success回调函数的this指向的是AJAX请求的配置对象（也就是你传给$.ajax()的那个参数对象），而不是触发点击事件的.follow按钮。所以你写的$(this)其实是在操作这个配置对象，自然看不到效果。

三种快速解决方法 #

方法1：提前保存当前元素到变量

在点击事件的开头，把当前按钮的jQuery对象存起来，之后在回调里直接用这个变量：

$('.follow').click(function() {
    var $btn = $(this); // 保存当前按钮的引用
    var id = $btn.data("id");
    var action = $btn.data("action");
    var url = '/action/' + action;

    $.ajax({
        url: url,
        headers: { 'TOKEN': $('meta[name="csrf-token"]').attr('content') },
        data: { id: id },
        type: "POST",
        success: function(v) {
            if (v.response == "OK") {
                $btn.data('action', 'unfollow'); // 用提前保存的变量
                // 如果需要同时更新DOM上的data-action属性（比如让HTML结构也变），还要加这句：
                // $btn.attr('data-action', 'unfollow');
            }
        }
    });
});

方法2：使用ES6箭头函数

箭头函数不会绑定自己的this，它会继承外层作用域的this，也就是点击事件里的.follow元素：

$('.follow').click(function() {
    var id = $(this).data("id");
    var action = $(this).data("action");
    var url = '/action/' + action;

    $.ajax({
        url: url,
        headers: { 'TOKEN': $('meta[name="csrf-token"]').attr('content') },
        data: { id: id },
        type: "POST",
        success: (v) => { // 换成箭头函数
            if (v.response == "OK") {
                $(this).data('action', 'unfollow'); // 这里的this还是原来的按钮
            }
        }
    });
});

方法3：设置AJAX的context选项

在AJAX配置里添加context: this，强制让回调函数的this指向当前点击的元素：

$('.follow').click(function() {
    var id = $(this).data("id");
    var action = $(this).data("action");
    var url = '/action/' + action;

    $.ajax({
        url: url,
        headers: { 'TOKEN': $('meta[name="csrf-token"]').attr('content') },
        data: { id: id },
        type: "POST",
        context: this, // 指定回调的this指向
        success: function(v) {
            if (v.response == "OK") {
                $(this).data('action', 'unfollow'); // 现在this就是目标按钮了
            }
        }
    });
});

额外提醒 #

如果你需要让页面上的data-action属性（HTML里的data-action="follow"）也跟着改变，除了用data()修改jQuery内部存储的数据，还要调用attr('data-action', 'unfollow')，因为data()方法只是操作jQuery维护的内存数据，不会直接修改DOM属性。

内容的提问来源于stack exchange，提问作者spice