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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.