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包含刀片代码，但确实可以正常工作('

 @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

当我检查复选框时，显示"成功更新"警报，因此我知道代码正在运行，但是vadeout不会做任何事情。控制台上没有错误来告诉我出了什么问题，它不会淡出。

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);
              }
            }
          });
}