jQuery 自定义确认框允许/阻止咳嗽事件答案

【问题标题】：jQuery custom confirm boxes allowing / blocking cought eventsjQuery 自定义确认框允许/阻止咳嗽事件
【发布时间】：2016-07-06 13:31:37
【问题描述】：

我有一个类似删除表单的东西，需要在模式确认框中按“是-删除”。所以基本上是这样的

$('#my-form').on('submit', function(e) {
  var r = confirm("Really Delete?");

  if (r != true) {
    e.preventDefault();
  }
});

所以这是可行的，但我不想要丑陋的浏览器确认框。我想使用我自己的对话框。

我的问题基本上是确认方法停止了脚本执行，因此如果还没有按下任何内容，我不需要调用 preventDefault。

对此有什么好的解决方案/最佳实践吗？

【问题讨论】：

使用回调或承诺；不能在中间暂停脚本。
有没有办法动态捕获抛出的事件并在确认后重新运行它而无需再次打开对话框？我想以多种形式使用它，因此需要一个通用的解决方案
既然你用的是jquery，为什么不试试jquery dialog呢。
@FrankProvost 不，但你可以将它分成不同的函数来解决它。
(顺便说一句你可以做if (!r) { e.preventDefault() }

标签： javascript jquery ajax forms

【解决方案1】：

您可以使用jquery confirm，如果用户确认您可以调用ajax：

$('.ajax-form').on('submit', function(e) {
  e.preventDefault();
  var self = $(this);
  $(".confirm").confirm({
    text: self.data('confirmation'),
    title: "Confirmation required",
    confirm: function(button) {
        $.ajax({
            method: self.attr('method') || 'GET',
            url: self.attr('action'), 
            data: self.serialize(),
            success: function() {
               // deleted
            }
        });
    }
  });
});

你可以有这样的html：

<form action="/delete" method="POST" data-confirmation="Really Delete?">

</form>

【讨论】：

这需要我为我想使用的每一种不同的形式编写代码，对吗？我基本上想构建一些更通用的东西，例如适用于附加“ajax-form”类的每个表单
@FrankProvost 查看我更新后的答案，它应该适用于所有具有 ajax-form 类的表单。