Javascript / Ajax - manually remove event handler from Sys.EventHandlerList ()
I have two script controls, one contains the other, and I was successfully able to handle events from the child on the parent with:
initialize: function()
{
this._autoComplete = $get(this._autoCompleteID);
this._onAutoCompleteSelected = Function
.createDelegate(this, this.handleAutoCompleteSelected);
var autoControl = this._autoComplete.control;
autoControl.addItemSelected(this._onAutoCompleteSelected);
...
}
Where addItemSelected (on child):
addItemSelected: function(handler)
{
list = this.getEvents();
list.addHandler('userItemSelected', handler);
},
and getEvents is:
getEvents: function()
{
if (this._events == null)
{
this._events = new Sys.EventHandlerList();
}
return this._events;
},
The problem is, when disposing of the parent, I want to do the same:
dispose: function()
{
var autoControl = this._autoComplete.control;
autoControl.removeItemSelected(this._onAutoCompleteSelected);
...
}
but .control doesn't exist anymore. I am assuming this is because the child control has already been removed and hence the .control property no longer works.
In light of this, I decided to fire the event list on the child and remove all event handlers in it.
dispose: function()
{
list = this.getEvents();
for(var item in list._list)
{
var handler;
handler = list.getHandler(item);
list.removeHandler(item, handler);
}
....
}
Is there a better way to do this?
source to share
I'm not sure if the "control" expando property on a DOM element is the correct way to reference a control object. It is driven by the framework, and as you can see, I think it is already running by the time you intend to issue.
Have you tried using $find
instead $get
and redesigning your links this way ?:
initialize: function()
{
this._autoControl = $find(this._autoCompleteID);
this._onAutoCompleteSelected = Function
.createDelegate(this, this.handleAutoCompleteSelected);
this._autoControl.addItemSelected(this._onAutoCompleteSelected);
}
dispose: function()
{
this._autoControl.removeItemSelected(this._onAutoCompleteSelected);
this._autoControl = null;
}
Oh yeah, and where you refer to the DOM element stored in this._autoComplete
, you yourself are going through the control object itself:
this._autoControl.get_element();
So basically invert the logic "get element => get control object" to "get control => get element".
source to share