3

As we all know, a lot of jQuery codes don't work on lightning (or I might be doing something wrong). Anyway, I'd like to ask how I could target the source of the element, similar to $(this) in jQuery.

I tried something like below but didn't work

HTML

<div class="tryDiv" onclick="{! c.showDiv }">
    <span> I am a span </span>
    <p>Click Me</p>
    <strong>I am strong</strong>
</div>
<div class="divToShow">I should appear</div>

CONTROLLER

showDiv : function (component, event, helper) {
   var clickedElement = event.getSource();
   alert(clickedElement);
}

There is no alert so I can't determine the error.

4

There are two types of DOM events in Lightning:

  • Native Javascript events
  • Lightning events

Since you using a standard <div> you will be using Native Javascript events. (event.target and event.currentTarget) -

(note I hid the div by giving it the class slds-hide if you are not using SLDS, use a different class

EG:

HTML

<div onclick="{!c.showDiv}">
   Click Me
</div>
<div aura:id="divToShow" class="slds-hide">I should appear</div>

CONTROLLER

showDiv : function (component, event, helper) {
   console.log(event.target);
}

However, I think you are trying to show a separate div. To do this:

CONTROLLER

showDiv : function (component, event, helper) {
   var divToShow = component.find("testDiv");
   $A.util.removeClass(divToShow,"slds-hide");
}

UPDATE

In response to your comment, here's how to handle parent -> child divs:

To reference the parent, use event.currentTarget (with the handler on the parent div). Now, since the addClass and removeClass methods are so easy to use, you want to get a component reference to the outer div.

Store the the aura:id twice - once as an aura:id and once as a data-aura-id attribute.

eg:

<div aura:id="parent-div" data-aura-id="parent-div" onclick="{!c.handleClick}">
  <div>
    Child
  </div>
</div>

In the controller:

var auraId = event.currentTarget.dataset.auraId;
var parentCmp = component.find(auraId);
  • You actually got what I wanted to do. However, I encountered another problem. The main div with onclick events have child elements. And those child elements are the ones triggering the event. I wanted to get the ID of the parent div where the actual onclick event is binded so I could pass this ID and use it as reference to show the hidden div. There are other divs using the same onclick event but with different IDs – GibiDroidZ Jul 12 '17 at 7:55
  • Thank you very much! I was able to create a reusable code with this one, passing different IDs in the controller but still using the same method. – GibiDroidZ Jul 13 '17 at 3:08
  • Great stuff! Glad it worked for you. – Caspar Harmer Jul 13 '17 at 3:09
3

You can use aura:id and use component.find("auraid").getElement() as shown below.

Component:-

<div class="tryDiv" aura:id="testDiv" onclick="{! c.showDiv }">
   Click Me
</div>
<div class="divToShow">I should appear</div>

Controller:-

showDiv : function (component, event, helper) {
   var clickedElement = component.find("testDiv").getElement();
}

See Event Handling in UI Components.

  • I updated my current code structure. I got this solution and was working but I'd like to know if there are other possible approach, mainly to get the id of the parent div where the onclick event is attached. The parent div have child elements that also triggers the event. I want to pass this id so I could do use this id in a hide-show effect. There are other divs that has the same onclick event but with different IDs. – GibiDroidZ Jul 12 '17 at 7:58

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.