删除按钮不起作用引导模式和 Laravel

Question

我创建了一个列出项目的表格，并添加了两个按钮（编辑和删除），所以按钮编辑正在工作，但按钮删除不起作用，我让我很开心，因为我没有找到错误。 这是表格：

<table id="datatable" class="table align-items-center table-flush">
    <thead class="thead-light">
        <tr>
            <th>text</th>
            <th class="disabled-sorting" width="10%"></th>
            <th class="disabled-sorting" width="10%"></th>
        </tr>
    </thead>
    <tbody>
        @foreach($Items as $item)
            <tr>
                <td>{{ $item->text }}</td>
                <td><a href="{{ route('ItemsController.edit', $item->id) }}" class="btn btn-primary btn-fab btn-icon btn-round" title="Edit">
                        <i class="fa fa-edit"></i></a>
                </td>
                <td>
                    <a href="#" class="btn btn-primary btn-fab btn-icon btn-round btn-delete" title="Delete" data-id="{{ $item->id }}" data-toggle="modal"  data-target="#modal-default" data-route="{{ route('ItemsController.destroy', $item->id) }}" data-title="{{ $item->id }}">
                        <i class="fa fa-trash"></i></a>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

模态是：

<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Item</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Delete?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <form class="" action="" method="post">
                    {{ csrf_field() }}
                    {{ method_field('DELETE') }}
                    <button type="submit" class="btn btn-danger" name="button">yes, delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

javascript 数据：

<script>
    $(document).on('click', '.btn-delete', function(){
        $('.modal form').attr('action', $(this).data('route'));
        $('#ModalLabel').text($(this).data('title'));
    })
</script>

和 controller function 销毁

public function destroy(Items $item) {
    $item->delete();

    return redirect()->route('items.index')->with('success', 'Deleted Success');
}

我逐行检查，我不知道我错了什么，请帮助我

多次感谢您参与其中。

Answer 1

您需要从 JS 触发您的模式。

如果它是引导程序 4，那么只需使用以下命令打开它，

$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));

//This will trigger modal
$("#modal-default").modal();

如果它是引导程序 5，那么只需使用以下命令打开它，

$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));

//This will trigger modal
modal = new bootstrap.Modal(document.getElementById("modal-default"));
modal.show();