You need to sign in to do that
Don't have an account?
Jason Lee 54
Getting original element from onclick?
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.
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> <div class="slds-media__body "> <p class="slds-tile__title slds-truncate"> {!convo.Name} </p> <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> </ul> <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> </div> </div> </div> </li> </div> </a> </aura:iteration>
fireAppEvent : function(cmp, event) { var appEvent = $A.get("e.c:ConversationEvent"); var convoId = event.target.getAttribute("data-id"); console.log(event.target); console.log(convoId); appEvent.setParams({ "message" : convoId }); appEvent.fire(); },
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 <p> tag, if I click on the image, the event.target is the <img> tag, but what I want is for it to always get the data from the original <div> tag.
How can I go about doing this?
You're looking for