Ajax post calls several times

Question

I have the following code:

<div id="assignWindow" style="display:none; width:500px">
    Invoice # <input id="invoiceNumber" name="invoiceNumber" /><br />
    Amount: <input id="amount" name="amount" /><br />
    <select id="carrierList" name="carrierList" style="width:400px;"></select>
    <br />
    <button type="button" id="acceptCarrierButton" name="acceptCarrierButton" class="btn btn-primary">@T("Common.Send")</button>
</div>

$('#acceptCarrierButton').on('click', function (e) {
    var valid = true;
    var amount = null;
    if ($('#amount').val() != '') {
        if (validatePrice($('#amount').val()))
            amount = $('#amount').val();
        else {
            alert('invalid amount');
            valid = false;
        }
    }
    if (valid) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: '@Url.Action("AssignDevice", "Tenant")',
            data: {
                carrierId: $('#carrierList').val(),
                deviceId: dataItem.Id,
                invoiceNumber: $('#invoiceNumber').val(),
                amount: amount
            },
            success: function (data) {
                $('#invoiceNumber').val('');
                $('#amount').val('');
                assignWindow.close();
                $("#devices-grid").data("kendoGrid").dataSource.read();
            },
            error: function (data) {
                alert(data.responseText);
            }
        });
    }
});

First call calls backend method only once, second call calls 2 times, third call calls 3 times etc ... Why so and how to correct it?

Where is this code located? `$('#acceptCarrierButton').on('click', function (e) {...` If the click handler is attached more than once, that would explain this behaviour as it end up [running multiple click event handlers](https://stackoverflow.com/questions/1491718/jquery-more-than-one-handler-for-same-event) for the same click event. — derloopkat, Oct 07 '20 at 17:01

Brian MacKay · Accepted Answer · 2020-10-07T17:10:35.267

Using the .on() syntax instead of .click() implies that you might be dynamically adding acceptCarrierButton. If that's the case and perhaps the entire assignWindow element is being constantly removed and re-created, I wonder if jQuery is maintaining the bindings and creating an additional binding each time acceptCarrierButton is re-created.

That could result in your multiple execution behavior. If I'm wrong, something else is definitely causing the event to be bound more than once. Maybe the JS itself is being added over and over?

Here are a few possible solutions:

Rule out the possibility that the JS is being added multiple times.
If assignWindow is being added and removed, considering hiding assignWindow rather than removing it from the DOM.
If that doesn't work, possibly experiment with manually calling $('#acceptCarrierButton').off('click') to remove the existing binding. This will remove all click bindings and it might help you learn when the bindings are being re-added.

Ajax post calls several times

1 Answers1