多个元素class相同时，Ajax请求成功后无法定位原点击元素怎么办？

问题核心原因 #

Ajax 的 success 回调默认的 this 指向的是本次 Ajax 请求的配置对象，而非你绑定点击事件的 DOM 元素，所以直接在回调里用 this 无法获取到目标点击元素。另外你原有代码里 var el = $(this)('.status'); 本身也是语法错误，你绑定点击事件的元素本身就是 .status 节点，不需要二次选择。

常用解决方案 #

方案1：外层缓存this（兼容性最好）

在 click 事件触发时就把当前点击元素的引用存到变量中，后续回调直接引用该变量即可：

$(".status").click(function(event){
    event.preventDefault();
    // 提前缓存点击元素的jQuery对象
    const $currentEl = $(this);
    var name  =  $currentEl.attr("data-name");

    $.ajax({
        url: FORM_URL,
        type: "POST",
        data: {name:name},
        showLoader: true,
        cache: false,
        success: function(data){
            // 直接使用缓存的元素操作
            $currentEl.empty();
            $currentEl.append(
                '<div class="status">' +
                '<p>name changed</p>' +
                '</div>'
            )
        }
    });
    return false;
});

方案2：通过context参数指定this指向

jQuery 的 $.ajax 支持传入 context 参数，自定义回调函数内的 this 指向：

$.ajax({
    url: FORM_URL,
    type: "POST",
    data: {name:name},
    showLoader: true,
    cache: false,
    // 指定回调的this指向当前点击元素
    context: this,
    success: function(data){
        const $currentEl = $(this);
        // 后续操作和之前一致
    }
})

方案3：用箭头函数改写回调

ES6 箭头函数不会创建独立的 this，会继承外层作用域的 this 指向：

$.ajax({
    // 其他配置不变
    success: (data) => {
        const $currentEl = $(this);
        // 后续操作和之前一致
    }
})

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