使用 ajax 的 jquery 选择器

Posted 2023-03-05

【中文标题】使用 ajax 的 jquery 选择器

【英文标题】：jquery selector using ajax

【发布时间】：2013-12-13 17:13:09

【问题描述】：

我有一个简单的.ajax 函数，它在点击事件上触发。函数触发成功，我很难删除最近的<tr>标签来确认删除。

$('.delete_item').click(function () 
    if (confirm('Delete this location?')) 
        $.ajax(
            type: "POST",
            url: "/Admin/Location/Delete",
            data: "id: '" + $(this).attr('id') + "' ",
            contentType: "application/json; charset=utf-8",
            dataType: "text",
            success: function (msg) 
                if (!msg) 
                    alert('There was an error deleting the location.');
                    return;
                
                else 
                    $(this).closest('tr').css('background-color', '#df8f8f').delay(800).fadeOut('slow');
                
            ,
            error: function (msg) 
                alert('error in ajax call');
            ,
        );
    
    return false;
);

这是标记

<tr class="class">    
    <td style="width:300px;">Rosana Square</td>
    <td>24 Hours</td>
    <td style="width:300px;">8555 Monrovia</td>
    <td style="width:300px;">http://www.website.com</td>
    <td style="width:50px; text-align:center;"><a href="/Admin/Location/Edit/13"><span class="glyphicon glyphicon-edit"></span></a></td>
    <td style="width: 50px; text-align: center;"><a href="#_" id="13" class="delete_item"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>

这个 ajax 内部的 this 不再相关？我没有收到任何错误。有人可以识别我的错误吗？

【参考方案1】：

this ajax 成功回调内部是您的问题，因为它不引用元素，而是 jqXhr 对象。尝试在 ajax 设置或缓存上下文中设置上下文。

$('.delete_item').click(function () 
    if (confirm('Delete this location?')) 
        $.ajax(
            type: "POST",
            url: "/Admin/Location/Delete",
            data: "id: '" + this.id + "' ",
            contentType: "application/json; charset=utf-8",
            context: this,      //<--- Set the context
            dataType: "text",
            success: function (msg) 
                if (!msg) 
                    alert('There was an error deleting the location.');
                    return;
                
                else 
                    $(this).closest('tr').css('background-color', '#df8f8f').delay(800).fadeOut('slow');
                
            ,
            error: function (msg) 
                alert('error in ajax call');
            ,
        );
    
    return false;
);

或者

   $('.delete_item').click(function () 
       if (confirm('Delete this location?')) 
       var self = this; //Set it here
       ....
       ....

   success: function (msg) 
       if (!msg) 
          alert('There was an error deleting the location.');
           return;
       
       else 
         $(self).closest('tr').css('background-color', '#df8f8f').delay(800).fadeOut('slow');
       

另外，您可以只使用this.id 而不是$(this).attr('id')

【参考方案2】：

总是可以为this设置上下文变量

var that = $(this);
$.ajax(
    ..
    ..
    success: function() 
        that.closest('tr').css(