我有2个ajax调用,1个用于创建,1个用于删除文件夹,这是源代码
<!-- Create folder ajax -->
<script>
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
});
$('#create-folder').click(function(e) {
e.preventDefault();
$.ajax({
data: $('#create-folder-form').serialize(),
url: "{{ route('folders.store') }}",
type: "POST",
dataType: "json",
success: function (data) {
if(data.errors) {
alert('Sorry');
} else {
$('#create-folder-form').trigger("reset");
$('#exampleModal').modal('hide');
$('.folders').append('<li data-id=' + data.id + '>' + data.name + " <button type='button' class='btn btn-danger delete-folder' data-toggle='modal' data-id='" + data.id + "'> Delete " + "</button>" + '</li>');
}
},
error: function (data) {
console.log('Error ' + data);
}
})
});
// Delete ajax call
$('.delete-folder').click(function(e) {
let id = ($(this).data('id'));
$.ajax({
type: 'delete',
url: "folders/" + id,
success: function(data) {
$('.folders li[data-id=' + data.id + ']').remove();
}
});
});
});
</script>
index.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
@include('partials.nav')
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Folders</div>
<div class="card-body">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Create folder
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="create-folder-form">
@csrf
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="create-folder">Create</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-3">
<div class="col-md-8">
<div class="card">
<div class="card-header">Folders</div>
<div class="card-body">
@if($folders)
<ul class="folders">
@foreach($folders as $folder)
<li data-id="{{ $folder->id }}">
{{ $folder->name }}
<button type='button' class='btn btn-danger delete-folder' data-toggle='modal' data-id='{{ $folder->id }}'>Delete</button>
</li>
@endforeach
</ul>
@endif
</div>
</div>
</div>
</div>
</div>
@endsection
控制器
public function index()
{
$user = User::findOrFail(Auth::id());
$folders = $user->folders()->get();
return view('folders.index', compact('folders'));
}
public function store(Request $request)
{
$attributes = $request->validate([
'name' => 'required'
]);
$attributes['user_id'] = Auth::id();
$folder = Folder::create($attributes);
return Response::json($folder);
}
public function destroy(Folder $folder)
{
$folder->delete();
return Response::json($folder);
}
一切正常,将元素添加到DOM中,但是有一个小问题,当我尝试在创建文件夹后删除文件夹时,它无法正常工作,我需要刷新页面然后正在工作。
答案 0 :(得分:1)
容易犯的错误。 jQuery不能直接找到动态添加的按钮。
代替
$('.delete-folder').click(function(e) {...});
使用
$('body').on('click','.delete-folder', function(e) {...});