使用sweetalert删除确认？
我试图创建一个使用sweetalert在我的应用程序删除确认，这里是我迄今所做..使用sweetalert删除确认？
查看：
<div class="box-button">
{!! Form::open(['method' => 'POST', 'class' => 'deleteedition', 'action' => ['[email protected]', $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' => ['[email protected]', $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>
基本上你是使用foreach（$ edition_list为$版）循环，然后硬编码在{!!Form::submit}} ID作为id=deleteedition1这意味着相同的ID在所有的删除按钮表。
相反，你可以尝试动态生成表单的ID和提交按钮，您可以通过数据文件属性像
<div class="box-button">
{!! Form::open(['method' => 'POST', 'class' => "deleteedition edition", 'id'=>'edition-'.$edition->id, 'action' => ['[email protected]', $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();
});
});
尝试使用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>
使用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的文档：如果此方法被调用时，事件的默认操作 不会被触发
希望这有助于！
它的工作，但它会删除列表中的整个文件，而不仅仅是一个文件，使用'return confirm（）'的默认警报工作正常，只会删除选定的列表。 ：/ –
我没有得到你，文件列表在哪里？ –
你的意思是“哪里”？它是每个记录中的删除按钮操作表中的数据记录。我无法解释，因为我的英语不太好 –
试试这个，你处理所有你的删除表单的提交事件。而且，如果SwaI位证实，形式将提交
$('.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;
});
})
不应该是'$（this）。在你处理表单本身的提交事件时提交（）'？如果我错了，请纠正我。 – Donkarnash
当你处理提交时，你不需要使用$（this）.submit（），因为它会触发提交事件，并且你将有递归。你应该返回true（提交）或false（不做任何事） – mikrafizik
好的谢谢澄清。 – Donkarnash
它的工作，但它将删除列表中的整个文件，而不仅仅是一个文件，使用'return confirm（）'的默认提醒工作正常，只会删除选定的列表。 ：/ –