按钮单击事件在 Bootstrap 3 模态中多次触发

Question

I have a bug (or feature) whereby any button that is inside a Bootstrap 3 modal will fire the click event several times. Besides going "old-school" and calling a script from an HTML button directly (which always works), is there a workaround for this?

                    <div class="modal-footer">
                        <span id="spanSendReport">
                            <button type="button" id="btnSendReport" class="btn btn-success" data-dismiss="modal">Send Report</button></span>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>

And the jquery

$("#btnSendReport").click(function (e) {
... my code
});

Using Bootstrap v3.4.1 and jQuery v3.3.1

Never ran into this before (except with things posting back, but there are no postbacks of any kind happening - checked in the browser and in debugger). There is only 1 button in the DOM with the Id (first thing I checked), but it fires the click event 4 times, every time? Any ideas

NOTE: I forgot to mention, the modal is opened from another modal. Maybe that has something to do with it.

The complete code inside the click event function (just in case it has something to do with it):

$("#btnSendReport").click(function (e) {
        var parElem = $(this).parent().parent().parent();
        var listID = parElem.find("#hidLID").val();
        var problemTypes = $.map(parElem.find('option:selected'), function (e) { return e.value; }).join(',');
        var problemTypeOther = parElem.find("#txtProblemTypeOther").val();

        var obj = {};
        obj.lid = listID;
        obj.ProblemTypes = problemTypes;
        obj.ProblemTypeOther = problemTypeOther;

        try {
            $.ajax({
                type: "POST",
                url: "../../api/reportdiscrepancy/",
                data: obj,
                dataType: "json",
                success: function (data) {
                    var result = data;
                },
                error: function (err) {
                    console.log(err);
                }
            });
        } catch (err) {
            console.log(err);
        }
    });

Answer 1

Found the problem and the answer to many issues I've been running into before and the culprit is function pageLoad() which is what older ASP.Net webforms uses for client side actions. I removed the '#btnSendReport' click to OUTSIDE of the pageLoad() function and it's only firing once now.

It looks like any MS-AJAX accumulates ALL event bindings (not actually firing them) within an UpdatePanel, then a final call to a click event (or whatever) will fire x number of times.

I was clued in as I made 3 changes to get to the modal and the last thing I did was click on the button (so it fired 4 times). I believe it may have to do with the default setting of the UpdatePanel with ChildrenAsTriggers=True (unfortunately, I have to leave that on as other functionality breaks if set to false).