javascript - 无法在 AJAX 成功函数内操作 DOM

Question

我想知道为什么我无法更改 AJAX 成功时的“this”元素。正如您所看到的，我正在尝试交换类，并在 ajax 成功时向 anchor 标记添加一个新的数据属性，但它不起作用。如果我将代码移到成功函数之外，它会完美地工作...我可以在检查元素时看到它实时更新(仅当代码位于成功之外时)

<a href="#" data-product-Id="@product.Id" class="lnkProduct">Add new product</a>

$(".lnkProduct").click(function (e) {
    e.preventDefault();

    var productId = $(this).attr('data-product-Id');

    $.ajax({
        type: "POST",
        url: "/Products/AddProduct",
        data: { productId: productId },
        dataType: "html",
        success: function (data) {
            $(this).addClass('lnkNewProduct').removeClass('lnkProduct');
            $(this).attr('data-newProduct-Id', data);
        }
    });
});

Answer 1

$(this) 将在 ajax success 函数中给出不同的上下文。试试这个:-

<a href="#" data-product-Id="@product.Id" class="lnkProduct">Add new product/a>

$(".lnkProduct").click(function (e) {
        e.preventDefault();
        var $this = $(this); //store $(this) reference in a variable
        var productId = $(this).attr('data-product-Id');

        $.ajax({
            type: "POST",
            url: "/Products/AddProduct",
            data: { productId: productId },
            dataType: "html",
            success: function (data) {
                $this.addClass('lnkNewProduct').removeClass('lnkProduct'); //change here
                $this.attr('data-newProduct-Id', data); //change here
            }
        });
});