使用ajax和jquery-confirm.js提交表单

Question

Ajax调用在不使用警报确认的情况下工作。但是当我添加警报确认时，ajax调用没有响应，我不知道问题出在哪里。

<link rel="stylesheet" href="jquery-confirm.min.css">
<script src="jquery-confirm.min.js"></script>
<form id="add-offer">
<input type="number" name="offer" class="form-control price_offered" value="" step="any">
<button class="btn btn-primary" type="submit"> Add offer   </button>
</form>

$("#add-offer").on('submit', function(e) {
e.preventDefault();
$.alert({
title: 'Confirmation ',
content: ' Are you sure.... bla bla bla? ',
rtl: true,
closeIcon: true,
buttons: {
confirm: {
text: 'Confirm ',
btnClass: 'btn-blue',
action: function() {
$.ajax({
type: 'POST',
url: 'ajax/add-offer.php',
data: new FormData(this),
dataType: 'json',
contentType: false,
cache: false,
processData: false,
beforeSend: function() {},
success: function(response) {
console.log(response);
if (response.success == 1) {
alert(response.message);
} else {
alert(response.message);
}
}
});
}
},
cancel: {
text: 'Cancel ',
action: function() {}
}
}
});
});

Answer 1

这可能是函数块上下文的问题。您可以设置数据变量以获取e.target作为Form data参数，然后尝试。检查以下代码：

$("#add-offer").on('submit', function(e) {
e.preventDefault();

$.alert({
title: 'Confirmation ',
content: ' Are you sure.... bla bla bla? ',
rtl: true,
closeIcon: true,
buttons: {
confirm: {
text: 'Confirm ',
btnClass: 'btn-blue',
action: function() {
$.ajax({
type: 'POST',
url: 'ajax/add-offer.php',
data: new FormData(e.target),
dataType: 'json',
contentType: false,
cache: false,
processData: false,
beforeSend: function() {},
success: function(response) {
console.log(response);
if (response.success == 1) {
alert(response.message);
} else {
alert(response.message);
}
}
});
}
},
cancel: {
text: 'Cancel ',
action: function() {}
}
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="jquery-confirm.min.css">
<script src="jquery-confirm.min.js"></script>
<form id="add-offer">
<input type="number" name="offer" class="form-control price_offered" value="" step="any">
<button class="btn btn-primary" type="submit"> Add offer   </button>
</form>

Answer 2

用alert({替换$.alert({

参见jsfiddle.net/steel9999/eyk0q37d/3