Would really appreciate if anyone can help me figure out why I am unable to fire events programmatically when using event delegation in MooTools (from the Element.Delegation class).

There is a parent <div> that has a change listener on some child <input> elements. When the change event is triggered by user actions, the handler on the parent div gets triggered, but when I fire it programmatically with fireEvent on any child input, nothing happens. The basic setup is:

html

<div id="listener">
    <input type="text" id="color" class="color" />
????????????????????????????????????????????????????????????????</div>???????????

js

$("listener").addEvent("change:relay(.color)", function() {
    alert("changed!!");
});

$("color").fireEvent("change"); // nothing happens

The event handler on the parent div does not get called. Any help is appreciated. Cheers!