Using $(this) in Meteor events

help
1

Hi Gang,
I’m having trouble understanding how to integrate jQuery for animating elements within meteor. I want to toggle some simple boxes to show/hide within my app.

My markup looks like

<template name="homepage">
    <div class="ContentWrapper">
        <div class="TeamBox">
          <h1> WHITE </h1>
        </div>
        <div class="Dropdown">
           <h2><a href="/whiteRos">ROSTER</a></h2>
           <h2><a href="/whiteStat">STATS</a></h2>
        </div>
        <div class="TeamBox">
           <h1> RED </h1>
        </div>
        <div class="Dropdown">
           <h2><a href="/redRos">ROSTER</a></h2>
           <h2><a href="/redStat">STATS</a></h2>
        </div>
    </div>
</template>

And in my JS file I have

// Controls Animation of Homepage Blocks
  Template.homepage.events({
    "click .TeamBox": function(){
      $(this).next('.Dropdown').toggle(500);
    }
  })

Which should work fine if I was using jQuery in a normal HTML doc, but for some reason this is not working.

Any tips on understanding which that wouldn’t work or the best way to do this within Meteor?

2

Hey @asepic,

Unfortunatly “this” is not the element your after, in fact “this” is mearly the template data context inside event handlers.

To get the element you will need to interrogate the event object like this:

// Controls Animation of Homepage Blocks
  Template.homepage.events({
    "click .TeamBox": function(e){
      $(e.target).next('.Dropdown').toggle(500);
    }
  })

Hope this helps?

F

3

@floydprice Thanks for clarifying that $(this) does not work as in a normal HTML doc and actually calls the template data context. I’ve tried using an event handler as you’ve showed, but unfortunately that does not work either. Calling

$("div.Dropdown").toggle(500);

inside the click event works, but that of course toggles both dropdowns rather than just the one next() to the clicked team box. It’s strange that jQuery is not able to work as it should within Meteor.

I’m not sure how I can get this to work as of now…

4

The problem you now face is that your selector isn’t returning enything becasue your .Dropdown element doesn’t have the same parent as the click target (H1), to resolve that use:

$(e.target).parent().next('.Dropdown').toggle(500);

Although I would consider a better HTML structure for this…

And BTW the issue is not related to Meteor in anyway :wink:

1 Like
5

@floydprice, Your solution works, thanks a bunch! My problem understanding the issue is that I thought my click target was the .Teambox div, therefore, there wouldn’t be any reason to use .parent(). This would explain why when logging e.target to the console I was getting an H1 element.

In order to help me down the road, why would the e.target not reference the same element that the click function in Meteor outlines? ie: "click .TeamBox":function(e) {...

6

The event bubbles up from the H1 to the Div (thats how events work in JS) so Meteor is doing the right thing when it fires the click event on the Div… Plain old jQuery outside of Meteor would do exactly the same thing.

Event propagation is a whole topic on its own, but the highlight here is that you always get the original Event object in the handler (Meteor or otherwise).

7

Thank you again @floydprice! I’m pretty new at both JS and Meteor and event bubbling is something I haven’t come across as of yet. I’ve just done some reading and it makes good sense now.

Thanks for your time! Much appreciated.

1 Like