附加功能 SweetAlert Confirmation 按钮不起作用

如何解决附加功能 SweetAlert Confirmation 按钮不起作用

我不精通 javascript 并且我不能很好地理解，因为 .then（结果）对我不起作用。也就是说，它从未被证实， 所以，它永远不会进入 if 条件。代码与提供的 in the SweetAlert api 相同。那个可变结果从何而来？

我的脚本的所有代码。尝试使用 Sweet alert 来确认删除表单......以这种方式确认按钮无效：

@extends('adminlte::page')

@section('title','Borradores')

@section('content_header')
    <h1 class="text-center">Listado de borradores</h1>
@stop

@section('content')



{{-- {{ route('admin.create') }} --}}
<div class="card">
    <div class="card-header">
        <a class="btn btn-primary btn-block" href=""><i class="fas fa-table mr-2"></i> Crear nuevo Articulo</a>
    </div>
    <!-- /.card-header -->
    <div class="card-body">
        <table id="tablaArticulos" class="table table-bordered table-striped dt-responsive tablas">
            <thead>
                <tr class="text-center">
                    <th>Categoria</th>
                    <th>Titulo</th>
                    <th>Entradilla</th>
                    <th>¿Publicar?</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>

                {{-- {{ route('admin.destroy',$post ) }} --}}

                @foreach ($posts as $post)
                    <tr class="text-center">
                        <td>{{ $post->category->name }}</td>
                        <td>{{ $post->name}}</td>
                        <td>{{ $post->extract}}</td>
                        <td><a class="btn btn-success" href="{{ route('admin.edit',$post) }}"><i class="fas fa-cross"></i></a></td>
                        <td>
                            {{-- {{ route('admin.edit',$post ) }} --}}
                            <form action="{{ route('admin.destroy',$post->id) }}" method="post" class="delete-form">
                                @csrf
                                @method('delete')
                                <div class="btn-group">
                                    <a class="btn btn-warning" href="{{route('admin.edit',$post)}}"><i class="fas fa-pen"></i></a>
                                    <button type="submit" class="btn btn-danger"><i class='fas fa-trash'></i></button>
                                </div>
                            </form>        
                        </td>
                    </tr>
                @endforeach

            </tbody>
            <tfoot>
                <tr class="text-center">
                    <th>Categoria</th>
                    <th>Titulo</th>
                    <th>Entradilla</th>
                    <th>¿Publicar?</th>
                    <th>Acciones</th>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- /.card-body -->
</div>
<!-- /.card -->
@stop

@section('css') 
    <style>
        .fotoTabla{
            width: 60px;
        }
    </style>
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('adminlte_js')
    @stack('js')
    @yield('js')

    <script src="{{ asset('js/app.js') }}"></script>

    
    {{-- Datatables responsive --}}
    <script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script>
    {{-- id Databales --}}
    <script>
    $(function () {

        $(".tablas").DataTable({
            responsive: true,autoWidth:false
        });
    });

    </script>

    @if (session('crear'))

        <script>
            Swal.fire({
                title: '{{ session("crear") }}',icon: 'success',showConfirmButton: false,timer: 2500,timerProgressBar: true
            })  
        </script>
    @endif

    @if (session('message'))

        <script>
            Swal.fire({
                title: '{{ session("message") }}',timerProgressBar: true
            })  
        </script>
    @endif

    @if (session('alert'))

        <script>
            Swal.fire({
                title: 'ATENCIÓN',text: '{{ session("alert") }}',icon: 'warning',timer: 3500,timerProgressBar: true
            })  
        </script>
    @endif

    <script>
    // Mensaje de alerta al pulsar el Botón de borrar en las tablas
        $('.delete-form').submit(function(e){
            e.preventDefault();
            let nombreElemento =  e.target.parentElement.parentElement.children[1].innerText;
            console.log(nombreElemento);
            Swal.fire({
                title: `¿Estás seguro de borrar ${nombreElemento}?`,text: "Recuerda que esta acción es irreversible",showCancelButton: true,confirmButtonColor: '#50f8ac',cancelButtonColor: '#d33',focusCancel: true,confirmButtonText: 'Ok,borralo',cancelButtonText: 'Cancelar' 
                }).then((result) => {
                if (result.isConfirmed) {
                    this.submit();
                }
                });
        });

</script>

@stop

我在.then之前放置了两个console.log()，在条件中放置了一个else

   <script>
    // Mensaje de alerta al pulsar el Botón de borrar en las tablas
$('.delete-form').submit(function(e){
    e.preventDefault();
    let nombreElemento =  e.target.parentElement.parentElement.children[1].innerText;
    Swal.fire({
        title: `¿Estás seguro de borrar ${nombreElemento}?`,text: 'Recuerda que esta acción es irreversible',Bórralo',cancelButtonText: 'Cancelar'
        }).then((result) => {
            console.log('Inside.. ');
        if (result.isConfirmed) {
            this.submit();
        } else {
            console.log('No confirmed!! ');
        }
        });
});
</script>

选择两个按钮，我得到相同的结果。

我用这种奇怪的行为制作了一个视频 Video in drive

解决方法

它来自它弹出的对话框...如果您确认“您确定吗？”然后它将触发下一个对话框“已删除！”。

,

最后，经过多日我找到了解决方案。

我在已安装的 Sweetalert 的 Adminlte 配置中更改了版本。我有版本 8 sweetalert2@8 默认情况下，我已将其传递给十个。这已经修复了奇怪的行为。

 'Sweetalert2' => [
            'active' => true,'files' => [
                [
                    'type' => 'js','asset' => false,'location' => '//cdn.jsdelivr.net/npm/sweetalert2@10',],