All the click events triggered when i click any link in the template

help
1

Hi guyzz ,please help me,I write two click events in a event handler of the same template for different class(js-admin-login & js-admin-logout).
client.js
Template.navbar.events({ 'click.js-admin-login':function(event){ $("#admin_login").modal('show'); return false; }, 'click.js-admin-logout':function(event){ Session.set('admin',undefined); return false; } });
independent of which button is clicked both the event got fired.I am not understanding what is happeing here.Please help !!
Client.html
<li><a href="#"><span class="glyphicon glyphicon-log-in js-admin-login"></span> Logout</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in js-admin-logout"></span> Login</a></li>

2

You need a space between click and .js-admin-login/out.

Also, it’s good practice to return false which ensures that DOM event propagation is stopped.

3

I tried that but when i give space betwee the click and class name… no events triggered.

4

Have you tried adding event.preventDefault(); to your events?

5

where i put this? event.preventDefault();

6 
Template.navbar.events({
  'click.js-admin-login':function(event){
     event.preventDefault();
     $("#admin_login").modal('show');
     return false;
  },
  'click.js-admin-logout':function(event){
    event.preventDefault();
    Session.set('admin',undefined);
    return false;
  }
});
2 Likes
7

return false is shorthand for event.stopImmediatePropagation() and event.preventDefault()

2 Likes
8

The more you know! Thanks :smiley:

2 Likes
9

I tried return false , but its also not working.
Both event triggered automatically if i clicked on any button in the template.

10

Sorry ,it also not working.
FYI:
Both event triggered automatically if i clicked on any button in the template.

11

Can we see your complete navbar template?

12 
<template name="navbar">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
			<li><a href="#">Page 2</a></li>
      {{#if isLogin}}
			<li><a href="#">Settings</a></li>
			{{/if}}
		</ul>
    <ul class="nav navbar-nav navbar-right">
      {{#if isLogin}}
			<li><a href="#"><span class="glyphicon glyphicon-log-in js-admin-login"></span> Logout</a></li>
			{{else}}
			<li><a href="#"><span class="glyphicon glyphicon-log-in js-admin-logout"></span> Login</a></li>
			{{/if}}
			</ul>
  </div>
</nav>
</template>
13

You’ll need to wrap your template in triple backticks, like this:

```
paste template here
```
14

done that already…

15

Your <span> tag was terminated with null content. I used the inbuilt currentUser helper to check logged-in state, which is why mine looks a little different from yours:

<template name="navbar">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        {{#if currentUser}}
          <li><a href="#">Settings</a></li>
        {{/if}}
      </ul>
      <ul class="nav navbar-nav navbar-right">
        {{#if currentUser}}
          <li><a href="#"><span class="glyphicon glyphicon-log-in js-admin-logout">Logout</span></a></li>
        {{else}}
          <li><a href="#"><span class="glyphicon glyphicon-log-in js-admin-login">Login</span></a></li>
        {{/if}}
      </ul>
    </div>
  </nav>
</template>

And my events:

Template.navbar.events({
  'click .js-admin-login'(event) {
     console.log('login clicked');
     return false;
  },
  'click .js-admin-logout'(event) {
    console.log('logout clicked');
    return false;
  }
});
16

thanks allot :slight_smile: …

1 Like
17

Thank you so much ,its works

1 Like