• Jason Lee 54
  • NEWBIE
  • 0 Points
  • Member since 2016

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 0
    Replies
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>

                            <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?