javascript - 为什么每次点击都会运行多次 Javascript 事件？

Question

我编写了一个 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>

弹出框（在树枝块中）：

 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>

标签： javascriptjqueryajaxevent-handlingdom-events