I am trying to implement an onclick listener that will take the div clicked and get the data-id from the element and call an apex method with it. Here is my code snippet.

<aura:iteration var="convo" items="{!v.conversations}">
                <a href="#" data-id="{!convo.Id}" onclick="{!c.fireAppEvent}" style="text-decoration:none;">
                <div class="{!convo.ReadFlag__c ==  True ? 'slds-box slds-no-flex
 slds-theme--shade' : 'slds-box slds-no-flex slds-theme--default'}" >
                    <li class="slds-list__item">
                        <div class="slds-media slds-tile">
                            <div class="slds-media__figure">
                                <img src="/resource/SLDS100/assets/images/avatar2.jpg" style="height:60px;" alt="Placeholder" />

                            <div class="slds-media__body ">
                                <p class="slds-tile__title slds-truncate">
                                <ul class="slds-tile__detail slds-list--horizontal slds-has-dividers slds-text-body--small">
                                    <li class="slds-truncate slds-list__item">From : {!convo.FromNumber__c}</li>
                                    <li class="slds-truncate slds-list__item">To : {!convo.ToNumber__c}</li>

                                <div class="{!convo.ReadFlag__c == True ? 'slds-media__body slds-text-body--regular' : 'slds-media__body slds-text-header--small'}">
                                    <p class="slds-truncate">{!convo.Messages__r[0].MessageText__c}</p>
                                    <p>{!convo.Messages__r[0].Direction__c == 'TOSF' ? 'Received at' : 'Sent at'} : {!convo.Messages__r[0].Time__c}</p>

and my JS code

fireAppEvent : function(cmp, event) {
        var appEvent = $A.get("e.c:ConversationEvent");
        var convoId = event.target.getAttribute("data-id");
            "message" : convoId });

The problem is that it uses the element that I clicked on instead of the div that I set the onclick to. By that I mean if I click on the text part of the div, the event.target is the

tag, if I click on the image, the event.target is the tag, but what I want is for it to always get the data from the original tag.

How can I go about doing this?

2 Answers 2


Lightning component framework events are different than individual element events.

There are couple of ways to solve your issue ,

1.Break your component into another component and use attribute instead ,something like this answer

2.Use aura:id to assign a unique Id to your element and use find function


It works if you make one of your row elements into a link. Here is a sample from a list of email templates.

<div class="slds-cell-wrap">
        <a href="javascript:void(0);" id="{!template.Id}" onclick="{!c.trClickHandler}">{!template.Name}</a>

Then in the component controller

trClickHandler : function(component, event, helper) {
    var target = event.target;
    var rowId = target.getAttribute("id");
    console.log("In tr click handler with ", rowId);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .