javascript - Ajax 调用多次

Question

我用Javascript编写了一段代码，其中我将输入类型提交附加到表单。在表单提交时，监听器被调用。

问题是，当我单击按钮一次时，就会发生一个 ajax 调用。当我再次单击它时，会发生两次调用，而每次单击只应发生一次调用。类似地，点击 3 次就会发生 3 个调用，依此类推...(调用数量不断增加)。如果我刷新页面，号码就会重置。我已经尝试了一切，但我没有运气。如果有人发现这里出了什么问题，那就太棒了。提前致谢。

JavaScript 代码:

$('input.create-discounts-quotations').click(function () {

    var discount_quotation_type = $('input.quotation-discount-type').val();

    if (discount_quotation_type == "value") {

        var total = $('input.discount-input-quotation').val();
        var discounted_price = product_price - total;
        $('#final_discounted_amount').val(discounted_price);

        $("table.product-response-table tr").each(function () {
            var row = $(this).index() + 1;
            var td = $(this).find('td.quotation-response-discounts');

            $(td).each(function () {
                $(this).html(total);
            });
        });
        $("table.product-response-table tr").each(function () {
            var row = $(this).index() + 1;
            var td = $(this).find('td.product_final_price_discounted');

            $(td).each(function () {
                $(this).html(discounted_price);
            });
        });
        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();
        });
    }
    if (discount_quotation_type == "percentage") {
        var total = $('input.discount-input-quotation').val();
        var temp_first = product_price;
        var temp1 = total / 100;
        var temp2 = temp1 * product_price;
        var discounted_price = product_price - temp2;
        $('#final_discounted_amount').val(discounted_price);

        $("table.product-response-table tr").each(function () {
            var row = $(this).index() + 1;
            var td = $(this).find('td.quotation-response-discounts');

            $(td).each(function () {
                $(this).html(total);
            });
        });
        $("table.product-response-table tr").each(function () {
            var row = $(this).index() + 1;
            var td = $(this).find('td.product_final_price_discounted');

            $(td).each(function () {
                $(this).html(discounted_price);
            });
        });
        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();
        });
    }
    if (discount_quotation_type == "not_selected") {
        $('.quotation-discount-status-update').empty();
        $('.quotation-discount-status-update').append('<div class="alert alert-danger">Discount Method Not Selected</div>');
        return false;
    }
   //        return false;
});

Answer 1

发生这种情况是因为每次单击代码时都会重新附加 submit 事件，因此每次单击都会重复该事件。

您永远不应该将事件附加到其他事件中，请将 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();
});

否则，每次使用 .off() 时都必须删除事件处理程序，例如:

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