Question

我想知道为什么我无法改变这个＆＃39;这个＆＃39;关于AJAX成功的要素。正如您所看到的，我正在尝试交换类，并在ajax成功时向锚标记添加新的数据属性，它只是不起作用。如果我将代码移到成功函数之外，它就能完美地工作......我可以看到它在检查元素时实时更新（仅当代码不在成功时）

<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成功函数中提供不同的上下文。请尝试： -

<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
            }
        });
});

Answer 2

$(this)在成功函数中提供不同的上下文。因此，在this的成功函数内部使用class selector来操作dom元素。

像这样

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

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

Answer 3

这是标准的JS行为。 this的值会根据方法的调用方式而变化。

尝试使用此功能。

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

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

无法在AJAX成功函数内部操纵DOM

3 个答案: