Javascript Ajax调用多次

我用Javascript编写了一段代码，其中我将一个输入类型submit附加到

表单

。在表单提交时，将调用侦听器

问题是，当我单击一次按钮时，会出现一个ajax调用。当我再次单击它时，会发生两个调用，而每次单击时只会发生一个调用。类似地，单击3次会出现3个呼叫，以此类推…（呼叫会增加）。如果我刷新页面，则数字会重置。我什么都试过了，但运气不好。如果有人发现这里出了什么问题，那就太棒了。提前谢谢

javascript代码：

$（“输入.创建折扣报价单”）。单击（函数（）{
var折扣\报价\类型=$（'input.quote折扣类型'）.val（）；
if（折扣\报价\类型==“值”）{
var total=$（'input.discount input quote'）.val（）；
var贴现价格=产品价格-总计；
$（'最终折扣金额'）.val（折扣价格）；
$（“table.product-response-table tr”）。每个（函数（）{
变量行=$（this）.index（）+1；
var td=$（this.find（'td.quote响应折扣'）；
$（td）.每个（函数（）{
$（this.html）（总计）；
});
});
$（“table.product-response-table tr”）。每个（函数（）{
变量行=$（this）.index（）+1；
var td=$（this.find（'td.product\u final\u price\u折扣'）；
$（td）.每个（函数（）{
$（this）.html（折扣价格）；
});
});
var form1=$（“表格、报价、折扣、更新表格”）；
表格1.关于“提交”，职能（e）{
var form_data1=form1.serialize（）；
$.ajax({
键入：“POST”，
url:form1.attr（'action'），
数据：表格1，
数据类型：“json”，
成功：功能（数据）{
$（'.quote折扣状态更新'）。空（）；
$（'.quote折扣状态更新'）。追加（'已添加折扣'）；
}
});
e、 预防默认值（）；
});
}
if（折扣\报价\类型==“百分比”）{
var total=$（'input.discount input quote'）.val（）；
var temp_first=产品价格；
var temp1=总计/100；
var temp2=temp1*产品价格；
var贴现价格=产品价格-temp2；
$（'最终折扣金额'）.val（折扣价格）；
$（“table.product-response-table tr”）。每个（函数（）{
变量行=$（this）.index（）+1；
var td=$（this.find（'td.quote响应折扣'）；
$（td）.每个（函数（）{
$（this.html）（总计）；
});
});
$（“table.product-response-table tr”）。每个（函数（）{
变量行=$（this）.index（）+1；
var td=$（this.find（'td.product\u final\u price\u折扣'）；
$（td）.每个（函数（）{
$（this）.html（折扣价格）；
});
});
var form1=$（“表格、报价、折扣、更新表格”）；
表格1.关于“提交”，职能（e）{
var form_data1=form1.serialize（）；
$.ajax({
键入：“POST”，
url:form1.attr（'action'），
数据：表格1，
数据类型：“json”，
成功：功能（数据）{
$（'.quote折扣状态更新'）。空（）；
$（'.quote折扣状态更新'）。追加（'已添加折扣'）；
}
});
e、 预防默认值（）；
});
}
如果（折扣\报价\类型==“未选定”）{
$（'.quote折扣状态更新'）。空（）；
$（'.quote折扣状态更新'）。追加（'未选择折扣方法'）；
返回false；
}
//返回false；
});

发生这种情况是因为每次单击时，您的代码都会重新附加

submit

事件，因此每次单击都会重复该事件

您不应将事件附加到其他事件中，请将

submit

事件放在click事件之外，代码应该可以工作，例如：

var form1 = $('form#quotation_discount_update_form');
form1.on("submit", function (e) {
    var form_data1 = form1.serialize();

    $.ajax({
        type: 'POST',
        url: form1.attr('action'),
        data: form_data1,
        dataType: "json",
        success: function (data) {
            $('.quotation-discount-status-update').empty();
            $('.quotation-discount-status-update').append('<div class="alert alert-success">Discount Added</div>');
        }
    });

    e.preventDefault();
});

---

应避免在其他绑定的事件处理程序中创建事件绑定。这是一种快速创建重复绑定并遇到问题的方法。您的所有代码都包装到

click

处理程序中。在这个处理程序中有

form1.on（“submit”，callback）。因此，几乎每次单击
时，您都会将一个新回调绑定到现有回调旁边的
submit
。
var form1 = $('form#quotation_discount_update_form');
form1.on("submit", function (e) {
    var form_data1 = form1.serialize();

    $.ajax({
        type: 'POST',
        url: form1.attr('action'),
        data: form_data1,
        dataType: "json",
        success: function (data) {
            $('.quotation-discount-status-update').empty();
            $('.quotation-discount-status-update').append('<div class="alert alert-success">Discount Added</div>');
        }
    });

    e.preventDefault();
});

form1.off("submit").on("submit", function (e) {