jQuery动态创建的列表项不会消失

Question

我有一个代码，当选中一个复选框时，该复选框所在的列表项应该从视图中淡出。 这是我当前的代码：

 $(document).on('change', '.task', function(){
var id = $(this).attr('id');
          $.ajax({
            url: '/task/'+id,
            method: 'POST',
            data: {'_method' : 'PUT'},
            dataType: 'json',
            success:function(json){

              if(json.isSent){
                alert('Task Updated Successfully!');
                $(this).closest('li').fadeOut(500);
              }

            }
          });
}

这是我的html（注意：我使用的是Laravel，因此某些html包含Blade代码，但确实可以正常工作）'

 @foreach ($return['Tasks'] as $task)
        <li class="list-group-item">
            <div class="form-group">
                <label class="control-label">{{ $task->name }} (Due on {{ $task->timeDue->format('l\\, F jS \\a\\t h:i:s A') }})</label>
                <div class="float-left">
                    <input type="checkbox" id="{{ $task->id }}" class="big-checkbox task" />
                </div>
            </div>
        </li>
      @endforeach

当我选中该复选框时，将显示“任务已成功更新”警报，因此我知道代码正在运行，但是fadeOut不会执行任何操作。 控制台中没有错误可以告诉我出了什么问题，它不会消失。

Answer 1

我相信您的范围已丢失（此）。 试试看

$(document).on('change', '.task', function(){
      var o = $(this);    
      var id = $(this).attr('id');
          $.ajax({
            url: '/task/'+id,
            method: 'POST',
            data: {'_method' : 'PUT'},
            dataType: 'json',
            success:function(json){

              if(json.isSent){
                alert('Task Updated Successfully!');
                o.closest('li').fadeOut(500);
              }

            }
          });
}