Question

我有一个像<span class="join-event to-join">join event</span>这样的跨度。我使用此函数通过AJAX进行单击操作。

但是在成功功能中，我似乎无法为该点击的跨度添加一个类。

function accept() {

    $(".to-join").click(function() {

        var id = $(this).attr("data-event");

        $.ajax({

            type: "post",
            url: "../assets/js/ajax/toggle-events.php",
            data: { 'id': id },
            success: function() {

                alert("good job");
                $(this).addClass("joined");

            },

            error: function () {

                alert("fail");

            }

        });

    });

}

Answer 1

使用ajax方法的context选项：

context: this,

context 类型：PlainObject此对象将是所有与Ajax相关的回调的上下文。默认情况下，上下文是一个对象表示调用中使用的Ajax设置（$ .ajaxSettings合并将设置传递给$ .ajax）。

Answer 2

你需要将$(this)定义为ajax调用之外的变量，这里面的ajax将引用jqXHR object

function accept() {    
    $(".to-join").click(function() {    
        var id = $(this).attr("data-event"),
              $this=$(this);    
        $.ajax({    
            type: "post",
            url: "../assets/js/ajax/toggle-events.php",
            data: { 'id': id },
            success: function() {    
                alert("good job");
                $this.addClass("joined");    
            },    
            error: function () {    
                alert("fail");    
            }    
        });    
    });    
}

Answer 3

$(".to-join").click(function() {
        var span = $(this);
        var id = $(this).attr("data-event");

        $.ajax({

            type: "post",
            url: "../assets/js/ajax/toggle-events.php",
            data: { 'id': id },
            success: function() {

                alert("good job");
                span.addClass("joined");

            },

            error: function () {

                alert("fail");

            }

        });

    });

span addClass不工作ajax

3 个答案: