How to set child of parent element click event target with meteor

For example:

I have a click event setup on a regular button. Inside the dom nested under this button element I have a span element. I want to be able to trigger the span element within the scope of the click event that has been triggered by the button.

How would I get the span element. I do not want to mess with the button element. I am having trouble getting the span from within the button click event target. In the example below... the user clicks the button and the span element would bounce with the standard jquery effect. I can easily access the button but how about the child. It should be easy to do but I cannot find the correct key to access on the event object that is returned to find the span that I wish to get/set for this specific event target.

Code for better idea:

<template name="test">
  <div class="container>
      <button class="btn btn primary" type="button">Click me</button>
      <span>Blah Blah Blah</span>
  </div>
</template>

Template.test.events({
   'click button'(event, instance) {
     $(event.currentTarget).effect("bounce"):  
  }

})

Answers 1

  • Sounds like you are looking for jQuery next():

    Get the immediately following sibling of each element in the set of matched elements.

    Therefore in your case:

    $(event.currentTarget).next().effect("bounce");
    

    Please note that your span is not "nested" under your button (i.e. it is not a child of the button), but appended after your button (i.e. it is the next sibling of the button).

    Demo: https://jsfiddle.net/n4Lj86dq/


Related Articles