在 AJAX 成功时使用 $(this).addClass 不起作用

Question

我正在处理点击事件的ajax，它的工作正常，但现在我想在成功函数中添加“class”，我使用$(this).addClass("cover")，但什么也没有发生。如果我为添加类定位类，我的意思是如果我像这样使用$('.dz-cover').addClass("cover")，它就可以正常工作，但它会为所有具有类名'.dz-cover'的链接标签添加类，我不想要这样做，我只想为我点击的那个链接添加类。我的代码如下：

$("#dropzonePreview").on("click", "a.dz-cover", function () {
    var id = $(this).data('id');
    $.ajax({
        type: 'POST',
        url: 'attachment/cover',
        data: {id: id},
        dataType: 'html',
        success: function (data) {
            $(this).addClass("cover");                   
        }
    });
});

- Muhammad Umar

Answer 1

这是因为在ajax调用中，元素a.dz-cover的上下文丢失了。您可以使用选项上下文在ajax调用中设置上下文：

$("#dropzonePreview").on("click", "a.dz-cover", function () {

var id = $(this).data('id');
$.ajax({
    type: 'POST',
    url: 'attachment/cover',
    context:this,
    data: {id: id},
    dataType: 'html',
    success: function (data) {
        $(this).addClass("cover");

    }
  });
});

- Milind Anantwar

---

无法工作。现在出现了奇怪的事情，如果我点击一个链接，类不会添加到该链接上，现在我点击另一个链接，现在类被添加了，但是没有在我之前点击的链接中添加，现在它正在添加到我之前点击的链接。 - Muhammad Umar

@MuhammadUmar：你应该在点击时显示加载器，然后在成功函数中隐藏它。 - Milind Anantwar

Answer 2

this在这种情况下不起作用，因为success是另一个块。

$("#dropzonePreview").on("click", "a.dz-cover", function () {
    var elm = $(this);
    var id = elm.data('id');
    $.ajax({
        type: 'POST',
        url: 'attachment/cover',
        data: { id: id },
        dataType: 'html',
        success: function (data) {
            elm.addClass("cover");
        }
    });
});

- Ibrahim Khan

---

它应该可以工作。你能创建一个fiddle吗？@MuhammadUmar - Ibrahim Khan

现在出现了一些奇怪的情况，如果我单击一个链接，类不会添加到该链接上，现在我单击另一个链接，现在类正在添加，但不是我之前单击的链接，现在它正在添加到我之前点击的链接上。 - Muhammad Umar

你能否用你的工作代码创建一个fiddle？@MuhammadUmar - Ibrahim Khan

Answer 3

您正在尝试在上下文之外使用$(this)。 您应该将其设置为变量，以便能够在AJAX回调中使用它，如下所示：

$("#dropzonePreview").on("click", "a.dz-cover", function () {
    var id = $(this).data('id');
    var element = $(this);
    $.ajax({
        type: 'POST',
        url: 'attachment/cover',
        data: {id: id},
        dataType: 'html',
        success: function (data) {
            element.addClass("cover");

        }
    });
});

- toomanyredirects

---

它仍然没有运作。 - Muhammad Umar