ajax提交后，消息会重复出现

Question

当我运行submit时，在重新加载之前，一条警告消息会发生多次。

例如。

首次运行提交成功消息

不刷新第二次运行提交两次重复发生成功消息

不刷新第三次运行提交三次重复发生成功消息

不刷新n运行提交n重复出现成功消息

为什么它会这样运行？我该如何解决这个问题？

我的代码如下。

$(document).ready(function() {
$('#my_modal').on('show.bs.modal', function(e) {
var p_index = $(e.relatedTarget).data('p_index');
$(e.currentTarget).find('input[name="p_index"]').val(p_index);
$("button#submit").click(function() {
$.ajax({
type: "POST",
async: false,
url: "../receipt/send.php",
data: $('form.send_p_index').serialize(),
success: function(data) {
alert("success")
$("#send_p_index")[0].reset()
$("#my_modal").modal('hide');
},
error: function() {
alert("Error");
}
});
});
});
}

Answer 1

错误

$(document).ready(function() {
$('#my_modal').on('show.bs.modal', function(e) {
var p_index = $(e.relatedTarget).data('p_index');
$(e.currentTarget).find('input[name="p_index"]').val(p_index);
$("button#submit").click(function() {
$.ajax({
type: "POST",
async: false,
url: "../receipt/send.php",
data: $('form.send_p_index').serialize(),
success: function(data) {
alert("success")
$("#send_p_index")[0].reset()
$("#my_modal").modal('hide');
},
error: function() {
alert("Error");
}
});
});
});
}

更正：将其置于模态之外。显示，因为每次显示模态时，它都会编写一个重复显示次数的提交函数。

$(document).on('click', 'button#submit', function() {
$.ajax({
type: "POST",
async: false,
url: "../receipt/send.php",
data: $('form.send_p_index').serialize(),
success: function(data) {
alert("success")
$("#send_p_index")[0].reset()
$("#my_modal").modal('hide');
},
error: function() {
alert("Error");
}
});
});