为什么每次单击都会运行多次Javascript事件？

我编写了一个js类，当用户单击按钮时处理Ajax调用。因此，用户只需单击“打开/关闭”，即可打开/关闭数据库中的实体

一切正常。按钮图标会更改，弹出窗口标题和文本也会更改。用户可以一次又一次地点击按钮，Ajax完成了工作，jQuery改变了外观-但是-

当我在调试栏中观看时，我看到每次单击都会运行一个额外的Ajax调用。当我单击按钮3次时，相同的Ajax调用将运行4次，以将实体更改为打开/关闭

我检查了搬运工人。每次只有一个处理程序和一个

#close course

元素

我真的不明白为什么每次点击Ajax调用都会越来越多

下面是我的js课程：

'use strict';

import $ from "jquery";

(function (window, $) {

class CourseApp {
    constructor($wrapper) {

        this.$wrapper = $wrapper.find('.js-wrapper');
        this.$body = $wrapper
        this.iconBtn = this.$wrapper.find('a').blur();
        this.$submitCount = 0;

        this.$wrapper.on(
            'click',
            'a',
            this.handleOpenCloseAction.bind(this)
        );
    }

    handleOpenCloseAction(e) {
        let popover = this.$body.find('.popover')

        // prevent popover to close - when open-button is hitted
        popover
            .on('mousedown', '#open-course', function (e) {
                e.preventDefault()
            });

        // prevent popover to close - when open-button is hitted
        popover
            .on('mousedown', '#close-course', function (e) {
                e.preventDefault()
            });

        // since open-course-link is clicked - open the course and
        // do some action
        popover
            .on(
                'click',
                '#open-course',
                function (e) {
                    const $btn = $(e.currentTarget);
                    let $icon = $btn.find('.icon-lock-open');

                    if (this.$submitCount === 0) {
                        this.$submitCount++;

                        $.ajax({
                            url: $btn.data('open-course-url'),
                            method: 'POST',
                        }).then(function (data) {
                            $('[data-toggle="popover"]').popover('hide');
                            this.iconBtn.blur();
                            this.iconBtn.attr('data-content', data);
                            this.iconBtn.attr('data-original-title', 'Kurs schließen');
                            $('.icon-lock').removeClass('icon-lock').addClass('icon-lock-open');
                        }.bind(this))
                        this.$submitCount = 0;
                    }
                }.bind(this)
            )

        // since close-course-link is clicked - close the course and
        // do some action
        popover
            .on(
                'click',
                '#close-course',
                function (e) {
                    const $btn = $(e.currentTarget);
                    if (this.$submitCount === 0) {
                        this.$submitCount++;

                        $.ajax({
                            url: $btn.data('close-course-url'),
                            method: 'POST',
                        }).then(function (data) {
                            $('[data-toggle="popover"]').popover('hide');
                            this.iconBtn.blur();
                            this.iconBtn.attr('data-content', data);
                            this.iconBtn.attr('data-original-title', 'Kurs öffnen');
                            $('.icon-lock-open').removeClass('icon-lock-open').addClass('icon-lock');

                        }.bind(this))
                        this.$submitCount = 0;
                    }

                }.bind(this)
            )
    }

}


window.CourseApp = CourseApp;


})(window, jQuery);

我的html：

 <td class="col-1 js-wrapper">
            <a href="#"
               class="btn btn-primary pop"
               data-content="{% if entity.open %} {{ popoverContentClose }} {% else %} {{ popoverContentOpen }} {% endif %}" data-toggle="popover" tabindex="0" data-trigger="focus"
               title=""
               data-original-title="{% if entity.open %} Kurs schließen? {% else %} Kurs öffnen? {% endif %}"
               data-placement="left">

                {% if entity.open %}
                    <i class="icon icon-lock-open"></i>
                {% else %}
                    <i class="icon icon-lock"></i>
                {% endif %}
            </a>
        </td>

popover（位于树枝块中）：

Möchtest du diesen Kurs wirklich schlienßen？他们是库尔森·穆森·索米特·杰登·库尔苏根·贝斯特提根（Kurszes müssen somit jeden Kurszugan bestätigen）。


{{'common.close'| trans}}

您是否检查了第一次调用的方法？我猜第一个调用是使用OPTIONS方法->第一个调用是：const$wrapper=$（'body'）；const JsApp=newcourseapp（$wrapper）；我想这跟选项法没什么关系…我自己发现的！我必须添加：$（e.delegateTarget）.remove（）；在我的处理器的末端。因为每次我点击按钮，引导程序都会创建一个新的弹出框。然后在所有的弹出窗口上触发此事件。每次单击（无站点刷新）查询都会找到一个用于运行该方法的popover！我应该在我的问题中发布解决方案吗？

 Möchtest du diesen Kurs wirklich schließen? Die Teilnehmer dieses Kurses müssen somit jeden Kurszugang bestätigen.
<br>
<table class='table popover-table mb-0'>
    <tr>
        <td class='pl-0 border-top-0'>
            <a href='#'
               class='btn btn-danger-outline col-md-12 ml-0' id='close-course' data-close-course-url='{{ path('close_course', {'id' : entity.id}) }}'><i class='icon icon-lock'></i>Schließen</a>
        </td>
        <td class='pr-0 border-top-0'>
            <button class='btn btn-primary col-md-12' class='close'
                    data-dismiss='alert'>{{ 'common.close'|trans }}</button>
        </td>
    </tr>
</table>