Question

我正在使用以下AJAX请求...

    $('.act').live('click', function(){     

$.ajax({
        type: "POST",
        async : false,
        url: req_url,
        data : {
            id : account_id
        },
        success : function(data) {
            if(data == 'banned'){
                $(this).closest('tr').addClass('danger');
                alert('updated');
            }
            else{
                alert(data);
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
        }); 

});

但是没有将成功的危险等级添加到tr中，请帮我解决，谢谢。

Answer 1

默认情况下，回调的上下文将是一个对象，表示调用中使用的ajax设置。

如果您想拥有不同的背景，您可以执行以下操作：

$('.act').live('click', function(){     
    $.ajax({
        type: "POST",
        async : false,
        url: req_url,
        context: this,  // <=== Pass context here
        data : {
            id : account_id
        },
        success : function(data) {
            if(data == 'banned'){
                $(this).closest('tr').addClass('danger');
                alert('updated');
            }
            else{
                alert(data);
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
    }); 
});

有关详细信息，请参阅：context

类型：PlainObject

此对象将成为所有与Ajax相关的回调的上下文。默认情况下，上下文是一个对象，表示调用中使用的ajax设置（$ .ajaxSettings与传递给$ .ajax的设置合并）。例如，将DOM元素指定为上下文将使得请求的完整回调的上下文如下所示：

Answer 2

该上下文中的

$(this)引用jqxhr对象，您需要以其他方式引用您的元素。

//编辑

.live现已弃用，不应在新代码中使用。

$(document).on('click', '.act', function(){ 
    var self = $(this);
    $.ajax({
        type: "POST",
        async : false,
        url: req_url,
        data : {
            id : account_id
        },
        success : function(data) {
            if(data == 'banned'){
                self.closest('tr').addClass('danger');
                alert('updated');
            } else{
                alert(data);
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
    }); 
});

Answer 3

回调函数中的

this不会引用在ajax调用期间引用的相同对象。

这里的解决方案是使用一个闭包变量，该变量将保存正确的引用并在回调方法中使用它。

$('.act').live('click', function () {
    var self = this;
    $.ajax({
        type: "POST",
        async: false,
        url: req_url,
        data: {
            id: account_id
        },
        success: function (data) {
            if (data == 'banned') {
                self.closest('tr').addClass('danger');
                alert('updated');
            } else {
                alert(data);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
    });
});

Answer 4

$(body).on('click', '.act', function() {  
    var myRow = $(this).closest('tr').find('td'); // you have to identify the row up here!   
    $.ajax({
        type: "POST",
        async : false,
        url: req_url,
        data : {
            id : account_id
        },
        success : function(data) {
            if(data == 'banned'){
                myRow.addClass('danger'); // but you can still use it here
                alert('updated');
            }
            else
            {
                alert(data);
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
    }); 
});

Answer 5

您引用的$(this)是success个实例。请看下面的代码。

$（'。act'）。live（'click'，function（）{
var $ this = $（this）;

然后在成功回调中，使用此

$this.closest('tr').addClass('danger');

注意：不推荐使用.live()。请改用.on()。

Here is how to use .on()

addClass不会将类添加到tr

5 个答案: