我不是世界上最好的程序员,所以最小的事情都会让我绊倒。我很确定这个问题以前有人问过,但我发现的东西对我不起作用(或者也许,我只是不知道!
所以我才开始使用sweetalert2与我现有的jquery函数相结合(它已经成功使用了很长一段时间(。我可以让 sweetalert2 中的所有内容正常工作,并使我现有的 jquery 回调正常工作......但不是在一起。从本质上讲,事件的顺序是:单击删除按钮 -> 模态窗口打开 -> 单击确认 ->处理图像删除 -> 关闭模态窗口 -> 隐藏图像缩略图 ->生活很好。或者,可以交换关闭模式窗口和隐藏缩略图的顺序。
精简的 html:
<div class="recordC">
<div><a data-fancybox="image_group" href="a/ path" class="showGalImg" ><img src="path/ to/ thumbnail-image"/></a></div>
<li><a id="del-10792-01522" href="#" class="delbuttonC" >DELETE</a></li>
</div>
请注意,id 是动态生成的,并且有多个div.recordC(每个图像一个(
jquery/sweetalert2:
$('.delbuttonC').click(function() {
var del_id = $(this).attr("id");
var photoId = 'id=' + del_id;
deletePhoto(photoId);
e.preventDefault();
});
function deletePhoto(photoId) {
swal({
title: "Are you sure?",
text: "Are you sure you want to delete this photo?",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "Yes, delete it!",
cancelButtonColor: '#d33',
confirmButtonColor: "#3085d6 ",
preConfirm: function() {
return new Promise(function(resolve) {
$.ajax({
url: "path/ to/ delete/ function",
type: "GET",
data: photoId,
success: function() {
swal({
title: 'Deleted!',
text: 'Your file has been deleted!',
type: 'success'}).then(function () {
$(this).parents(".recordC").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
});
} // success:
}); // $.ajax
}); // Promise()
}, // preConfirm:
}); // swal
} // deletePhoto
模式窗口打开,$.ajax 有效,sweetalert2 成功有效。在我的原始jquery函数中,回调也可以在删除图像后工作。但是该死的,如果我能让它与 swal(( 一起工作。
我也尝试过:
success: function() {
swal('Deleted!', 'Your file has been deleted!', 'success');
$(this).parents(".recordC").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
我已经交换了 2 个回调的顺序,并在执行 $.ajax 后将我的回调移动到(这是我当前版本中工作的位置(。我还将 $(this( 更改为 $("#" + del_id( ...等等。所有这些排列都是从互联网上提出的各种问题中获得的!在我所做的每次更改中,带有 sweetalert2 的所有内容都可以正常工作,我设法删除了图像......我似乎无法让div.recordC隐藏。我知道必须有一个非常简单的答案,我似乎无法解决:-(
解决了我的问题...无非就是不将变量del_id拉入函数 deletePhoto(( 中。