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>
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.
I tried that but when i give space betwee the click and class name… no events triggered.
Have you tried adding event.preventDefault();
to your events?
where i put this? event.preventDefault();
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;
}
});
return false
is shorthand for event.stopImmediatePropagation()
and event.preventDefault()
The more you know! Thanks
I tried return false , but its also not working.
Both event triggered automatically if i clicked on any button in the template.
Sorry ,it also not working.
FYI:
Both event triggered automatically if i clicked on any button in the template.
Can we see your complete navbar
template?
<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>
You’ll need to wrap your template in triple backticks, like this:
```
paste template here
```
done that already…
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;
}
});
thanks allot …
Thank you so much ,its works