Lightning Components: Unable to handle an event

Question

I have a component which consists of another child component which is added dynamically:

<aura:component>
    <ltng:require styles="/resource/SLDS0122/assets/styles/salesforce-lightning-design-system-ltng.css" />
     <aura:attribute name="attachments" type="Aura.Component[]" description="Array of Components for adding attachement components"/>
                <aura:handler name="removeAttachment" event="c:removeAttachment" action="{!c.removeAttachment}"/>
    <div class="slds-attachments">
       <!--File attachment components are added here -->
           {!v.attachments}
     </div>
    </aura:component>

And child component which has a registered event as follows:childComponent

<aura:component>
    <!-- Handler -->
    <aura:Handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:registerEvent name="removeAttachment" type="c:removeAttachment"/>
<button class="slds-button slds-button--icon-bare" onclick="{!c.fireRemoveAttachmentEvt}"/>
</aura:component>

Controller:

{
    fireRemoveAttachmentEvt : function(cmp,evt,hlpr){
        console.log("Inside fireRemoveAttachmentEvt");
        var removeAttachEvt = cmp.getEvent("removeAttachment");
        console.log(removeAttachEvt.getName());
        removeAttachEvt.fire(); 
    },
}

Now i am able to handle the event if put a handler in the same component, but if i try to handle the event in an another component, the method referenced in the action attribute of handler is not executed.

Any help on this greatly appreciated. Thank you.

Answer 1

The only way i was able to make this work was referencing the event handling method while creating the components. Check the below code for example.

$A.createComponent(
                "c.caseFeedCommentAttachment",
                {
                    "isFileValid" : isFileValid,
                    "filename":inputFileList[i].name,
                    "filePath":fileURL,
                    "filetype":inputFileList[i].type,
                    "fileSize":fileSize,
                    "aura:id":inputFileList[i].name+uploadCounter.toString(),
                    "removeAttachment" : component.getReference("c.handleRemoveAttachmentEvt")
                },

Note: Also i have removed the event handler on the Parent component, just to check if the method is called. It still works which is confusing.

Answer 2

I think that is the same issues as mentioned here: Event fired by a dynamically created component does not get caught - have an eye at the comments from Doug Chasman.

As I understood there is a bug in the framework which prevents event bubbling for dynamically created components. Workaround will be the usage of application event (also mentioned in the post).