我尝试使用sweetalert在我的应用中创建删除确认，这是我到目前为止所做的...
查看：
<div class="box-button">
{!! Form::open(['method' => 'POST', 'class' => 'deleteedition', 'action' => ['EditionController@destroy', $edition->id]]) !!}
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
{!! Form::submit('Delete', ['class' => 'btn btn-danger btn-sm', 'id'=>'deleteedition1']) !!}
{!! Form::close() !!}
</div>
JS：
<script>
$("#deleteedition1").on("click", function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this lorem ipsum!", type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function () {
$(".deleteedition").submit();
});
});
</script>
问题是当我点击删除按钮时，它会继续删除文件，即使我还没有确认。有人可以告诉我我做错了什么吗？谢谢你的帮助！
全桌视图：
<table class="table table-borderless table-responsive" style="table-layout: fixed;">
<thead>
<tr>
<th style="overflow: hidden;"></th>
@if (Auth::check() && Auth::user()->level == 'admin')
<th style="width: 130px;"></th>
@endif
</tr>
</thead>
<tbody>
<?php foreach ($edition_list as $edition): ?>
<tr>
<td style="overflow: hidden;"><a href="{{ url('edition/' . $edition->id) }}">Volume {{ $edition->volume }}, Nomor {{ $edition->number }} ({{ Carbon\Carbon::parse($edition->start)->format('F, Y') }})</a>
@if (Auth::check() && Auth::user()->status == '1')
@if (Carbon\Carbon::now()->between(Carbon\Carbon::parse($edition->start), Carbon\Carbon::parse($edition->limit)))
<p style="font-size: 10px; color: red;">Edisi aktif periode : {{ Carbon\Carbon::parse($edition->start)->format('j F Y') }} sampai {{ Carbon\Carbon::parse($edition->limit)->format('j F Y') }}</p>
@else
<p></p>
@endif
@endif
</td>
@if (Auth::check() && Auth::user()->level == 'admin')
<td style="overflow: hidden; width: 210px;">
<div class="box-button">
{{ link_to('edition/' . $edition->id . '/edit', 'Edit', ['class' => 'btn btn-warning btn-sm']) }}
</div>
<div class="box-button">
{!! Form::open(['method' => 'POST', 'class' => 'deleteedition', 'action' => ['EditionController@destroy', $edition->id]]) !!}
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
{!! Form::submit('Delete', ['class' => 'btn btn-danger btn-sm', 'id'=>'deleteedition1']) !!}
{!! Form::close() !!}
</div>
</td>
@endif
</tr>
<?php endforeach ?>
</tbody>
</table>
答案 0 :(得分：0)
尝试使用preventDefault()作为：
<script>
$("#deleteedition1").on("click", function (event) {
event.preventDefault();
swal({
title: "Are you sure?",
text: "You will not be able to recover this lorem ipsum!", type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function () {
$(".deleteedition").submit();
});
});
</script>
答案 1 :(得分：0)
使用jQuery's preventDefault()阻止表单提交，如下所示：
$("#deleteedition1").on("click", function (e) {
e.preventDefault(); <-------- here
swal({
title: "Are you sure?",
text: "You will not be able to recover this lorem ipsum!", type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function () {
// Use closest() to find the correct form in the DOM
$(this).closest("form.deleteedition").submit();
});
});
您可以使用jQuery的closest()方法从HTML DOM中查找正确的文件。
根据jQuery Docs：如果调用此方法，则默认操作 该事件不会被触发
希望这有帮助！
答案 2 :(得分：0)
试试这个，你处理所有删除表格的提交事件。并且，如果swal确认，表格将提交
$('.deleteedition').on('submit',function(){
return swal({
title: "Are you sure?",
text: "You will not be able to recover this lorem ipsum!", type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function () {
// Use closest() to find the correct form in the DOM
//$(this).closest("form.deleteedition").submit();
return true;
});
})
答案 3 :(得分：0)
基本上你使用foreach（$ edition_list as $ edition）循环，然后将{!!Form::submit}}中的id硬编码为id=deleteedition1，这对于表中的所有删除按钮都意味着相同的id。
相反，您可以尝试动态生成表单ID，而在提交按钮上，您可以通过数据文件属性进行引用，例如
<div class="box-button">
{!! Form::open(['method' => 'POST', 'class' => "deleteedition edition", 'id'=>'edition-'.$edition->id, 'action' => ['EditionController@destroy', $edition->id]]) !!}
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
{!! Form::submit('Delete', ['class' => 'btn btn-danger btn-sm delete-edition-btn', 'data-file'=>"edition-".$edition->id]) !!}
{!! Form::close() !!}
</div>
然后在你的脚本中
<script>
$(".delete-edition-btn").on("click", function (event) {
event.preventDefault();
var file= '#'+this.attr('data-file'),
formId='form'+file,
parent=this.parents(formId);
swal({
title: "Are you sure?",
text: "You will not be able to recover this lorem ipsum!", type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function () {
$(parent).submit();
});
});
</script>
Or
//here you don't depend upon dynamic ids but use the jQuery closest()
<script>
$(".delete-edition-btn").on("click", function(event){
event.preventDefault();
swal({
title: "Are you sure?",
text: "You will not be able to recover this lorem ipsum!", type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
// Use closest() to find the correct form in the DOM
$(this).closest("form.deleteedition").submit();
});
});