使用 SweetAlert2 和自定义回调/jQuery 选择器



我不是世界上最好的程序员,所以最小的事情都会让我绊倒。我很确定这个问题以前有人问过,但我发现的东西对我不起作用(或者也许,我只是不知道!

所以我才开始使用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(( 中。

最新更新