Trouble with meteor events


#1

I have a meteor template:

<template name="createDefaultTemplate">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"> Select Role of router</h4>
        </div>

        <div class="btn-group btn-group-justified" id="routerType">
            <a href="{{pathFor route="edgeRouterAvailablePGTemplate"}}" id= "edge" class="btn btn-default">Edge Router</a>
            <a href="{{pathFor route="aggrRouterAvailablePGTemplate"}}" id= "agg" class="btn btn-default">Aggr. Router</a>
            <a href="{{pathFor route="coreRouterAvailablePGTemplate"}}" id= "core" class="btn btn-default">Core Router</a>
        </div>
    </div>

I’m trying to pull the value of the button clicked so that I can trigger a new route. Unfortunately, I’m unable to get it right. I’ve tried the below, but it does fetch the value from the button.

Template.createDefaultTemplate.events({
    'click #agg ': function(event){
        console.log(event);
        var selectValue = $(event.target).val();
        console.log(selectValue + "is selected  - message logged in events");
        Session.set("selectedSchema",selectValue);
        console.log(Session.get("selectedSchema")+ " is session variable set - message logged in events");
    }
});

I’ve also tried something like :

 'click' : function(event)
'click a .btn .btn-default' : function(event)

But none of them seem to have any effect. I’m able to get a reading of console.log(event) but I’m unable to extract the value after clicking.

How do I get this right?


#2

I would change your events to:

Template.createDefaultTemplate.events({
    'click a'(event){
        var selectValue = event.target.innerText; // or event.target.id for the id
        console.log(selectValue + "is selected  - message logged in events");
        Session.set("selectedSchema",selectValue);
        console.log(Session.get("selectedSchema")+ " is session variable set - message logged in events");
    }
});

The important bit being var selectValue = event.target.innerText; - note it doesn’t need jQuery for this.


#3

You should also be aware that you may need currentTarget instead of target. There’s a handy jsfiddle here which illustrates the difference.


#4

Thanks Rob! I’ll need to check this out tomorrow at work.