Programmatically fired events not working with event delegation

Question

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.Delegati

Answer 1

this won't work too well 'as is'. the problem with event bubbling (and with programmatic firing of events) is that it may need the event object to be 'real' in order for it to contain event.target that is being matched against the relay string. also, document.id("color").fireEvent() won't work as color itself has no event attached to it.

to get around this, you fake the event on the parent listener by passing an event object that contains the target element like so:

document.id("listener").fireEvent("change", {
    target: document.id("color")
});

view in action: http://www.jsfiddle.net/xZFqp/1/

if you do things like event.stop in your callback function then you need to pass on {target: document.id("color"), stop: Function.from} and so forth for any event methods you may be referencing but the event delegation code is only interested in target for now.

Answer 2

I resolved it this way:

document.addEvents({
    'click:relay(.remove_curso)': function(){
        document.fireEvent('_remove_curso', this);
    },
    '_remove_curso':function( me ){
        console.log( me );
    }.bind( this )
}