Question

在JQuery中使用Typescript我创建了一个对话框，然后将click事件附加到两个按钮和窗口标题中的“X”。每次用户希望打开对话框时，代码实际上会创建一个新的SettingDlog对象，但是绑定的单击事件似乎为用户选择显示“设置”对话框的每个后续时间添加了一个附加事件。

我想也许将click事件添加到DOM对象中，因为它独立于typescript类（JavaScript对象），但我无法在DOM资源管理器中看到它，所以我认为这不正确。

作为一种解决方法，我在调用它时显式删除了事件处理程序，但我不明白为什么我必须这样做，因为我每次都在创建一个新的SettingDlog对象。

显示对话框的代码：

 let myDlog = new SettingsDlog();
 myDlog.closedCallback = "settingsDlog_Closed";
 myDlog.show();

然后在SettingsDlog的show（）方法中我有：

show() {
     $('#closeX').click({ isOK: false }, this.onClose.bind(this))
     $('#btnCancel').click({ isOK: false }, this.onClose.bind(this))
     $('#btnOK').click({ isOK: true }, this.onClose.bind(this));
}

最后，当用户点击三个UIElements中的任何一个关闭对话框时，会调用设置对话框的onClose（）方法：

 onClose(event) {
    this.dialogResult = event.data.isOK;
    if (!AppHelper.isNullOrEmpty(this._closedCallback))
        MainPage[this._closedCallback](this);
}

最后，为MainPage对象调用_closedCallback：

settingsDlog_Closed(sender: SettingsDlog) {
        if (!sender.dialogResult)
            return;
       // if here do something useful...
}

当我在settingsDlog_Closed中设置断点时，我点击第二次（或第三次......）显示“设置”对话框，就好像正在添加第二个（或第三个）点击事件一样。

这是我添加到SettingsDlog的onClosed方法的代码作为解决方法：

 $('#closeX').off('click');
 $('#btnCancel').off('click');
 $('#btnOK').off('click');

有人可以帮我理解这种奇怪的行为吗？

Answer 1

感谢@Patrick Evans指出我正确的方向。这是我需要知道的。 How to check whether dynamically attached event listener exists or not?

考虑到这一点，我在SettingsDlog类中添加了一个静态变量，一旦调用“show”方法，该变量就设置为true。该类对象的任何后续实例化都不会复制事件处理程序附加过程。

事件处理程序在哪里附加，为什么它会出现？

1 个答案: