Where is the eventhandler attached and why is it present at all?

Question

Using Typescript with JQuery I create a dialog and then attach click event to the two buttons and the "X" in the window title. The code actually creates a new SettingDlog object each time the user desires to open the dialog, however the bound click event seems to add an additional event for every subsequent time the user chooses to display the Settings dialog.

I thought perhaps the click event was being added to the DOM object, since that is independent of the typescript class (JavaScript object) but I can't see it in the DOM explorer so I don't think this is correct.

As a work around I explicitly remove the event handler when it is called but I don't understand why I have to do this since I'm creating a new SettingDlog object every time.

Code to show dialog:

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

Then in the show() method for the SettingsDlog I have:

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));
}

Finally when the user clicks any of the three UIElements to close the dialog the onClose() method of the settings dialog is called:

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

Finally the _closedCallback is called for the MainPage object:

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

When I put a break point in settingsDlog_Closed and I click to show the Settings dialog a second time (or third...) it is acting as if a second (or third) click event is being added.

This is the code I'm adding to the onClosed method of the SettingsDlog as a workaround:

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

Can someone help me to understand this odd behavior?

_"I'm creating a new SettingDlog object every time"_, unless your class is destroying and recreating the elements, the elements stay in the DOM as do the event listeners you add, hence why you have to switch them off in the onclosed event — Patrick Evans, Apr 29 '16 at 16:06
The lines in show() should look analog to this one: $('#closeX').click({ isOK: false }, () => this.onClose) If it works, I will explain why :) — Granga, Apr 29 '16 at 16:17
@PatrickEvans the class SettingsDlog is a typescript class (JavaScript object) that exists to interact with the DOM. As I stated I thought it was in the DOM but it is not being attached. I look at the onClick method for the DOM element and it is null after I attach the click event. — MtnManChris, Apr 29 '16 at 16:38
jQuery `.click` and similar event methods do not set the onclick attribute, it uses addEventListener — Patrick Evans, Apr 29 '16 at 16:53
@MtnManChris is there need for further clarification, or you solved the issue? — Granga, Apr 29 '16 at 19:48

score 0 · Answer 1 · edited May 23 '17 at 12:16

Thank you to @Patrick Evans for pointing me in the right direction. This is what I needed to know. How to check whether dynamically attached event listener exists or not?

With that in mind I added a static variable to the SettingsDlog class that is set to true once the "show" method is called. Any subsequent instantiations of of an object of the class will not duplicate the event handler attachment process.

Where is the eventhandler attached and why is it present at all?

1 Answers1