Question

我有这个脚本：

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','.remove',function(e){
        // e.preventDefault();
        var data = $(this).data('file');
        $.ajax({
            type:'POST',
            url:'/backup/delete',
            data:'fileName='+data,
            success: function(data){
                $(this).parents('tr').remove();
            }
        },'json');
    });
});

和文件部分：

<tr>
                <td>adif20150331133844.adi</td>
                <td style="width: 2em"><span class="remove link" data-file="adif20150331133844.adi"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></span></td>
                <td style="width: 2em"><span class="restore link" data-file="adif20150331133844.adi"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></span></td>
            </tr>

任务是删除文件后删除tr部分。我不能让它发挥作用。文件被删除，响应是200，好的但是remove（）也不起作用，即使我用ajax中的complete替换成功。它可能是什么？

Answer 1

在ajax调用中元素的上下文丢失，您可以使用选项context将上下文设置为ajax：

$.ajax({
        type:'POST',
        url:'/backup/delete',
        context:this,
        data:'fileName='+data,
        success: function(data){
            $(this).parents('tr').remove();
        }
    },'json');

<强> Context option in ajax

Answer 2

将此作为一个变量并使用

$(document).ready(function(){
    $(document).on('click','.remove',function(e){
        // e.preventDefault();

var _this=$(this);  // assign this as one variable
        var data = _this.data('file');
        $.ajax({
            type:'POST',
            url:'/backup/delete',
            data:'fileName='+data,
            success: function(data){
                _this.parents('tr').remove();  // here this not .remove                 }
        },'json');
    });
});

Answer 3

将$this变量设置为$(this)，并将其用于Ajax调用的成功处理程序中。

jQuery(function($) {
    $(document).on('click','.remove',function(e){
        var $this = $(this); // set it
        // e.preventDefault();
        var data = $(this).data('file');
        $.ajax({
            type:'POST',
            url:'/backup/delete',
            data:'fileName='+data,
            success: function(data){
                $this.parents('tr').remove(); // use it
            }
        },'json');
    });
});

Answer 4

<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','.remove',function(e){
    // e.preventDefault();
    var oThis = $(this);
    var data = $(this).data('file');
    $.ajax({
        type:'POST',
        url:'/backup/delete',
        data:'fileName='+data,
        success: function(data){
            oThis.parents('tr').remove();
        }
    },'json');
});
});

Answer 5

在点击datathis上分配一些变量，在成功功能中使用它

$(document).ready(function(){
    $(document).on('click','.remove',function(e){
        // e.preventDefault();
       var datathis=$(this);  // assign this as one variable
        var data = _this.data('file');
        $.ajax({
            type:'POST',
            url:'/backup/delete',
            data:'fileName='+data,
            success: function(data){
                datathis.parents('tr').remove();  
}
        },'json');
    });

ajax调用后无法删除元素

5 个答案: