使用 ajax 的 jquery 选择器答案

【问题标题】：jquery selector using ajax使用 ajax 的 jquery 选择器
【发布时间】：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 不再相关？我没有收到任何错误。有人可以识别我的错误吗？

【问题讨论】：

标签： jquery ajax jquery-selectors

【解决方案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(

【讨论】：