javascript - Click not working in any condition -

i have simple hyperlink on when trying add click() event handler not working. tried, .on(), .live(), .delegate() none of them worked. how can it?

i cannot make fiddle becuase don't know why bootstrap.min.css not getting included in external resources section.

please tell me other way of doing it.

my code:

html:

<div class="navbar nav-fixed-top navbar-inverse" style="min-height: 50px; margin-bottom: 0; box-shadow: 0px 2px 5px #222;">     <!-- creating fixed top navbar no bottom margin , nice little shadow , increasing height -->     <div class="navbar-inner" style="border-radius: 0;min-height: 50px; ">         <!-- creating inner content of navbar , increasng it's height aswell match parent's height aswell -->         <div class="container-fluid">             <!-- main header starts -->             <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">                 <!-- small screen collapseable menu starts -->  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>                  <!-- collapseable menu icon(becuase 3 `icon-bar` make icon :p) -->             </button>   <a class="brand" href="#"><img src="img/logo.png"                     style="height: 25px;" /> </a>              <!-- adding logo header -->             <div class="nav-collapse collapse pull-right">                 <!-- div holding collapseable menu's data -->                 <ul class="nav">                     <!-- creating list created in collapseable menu -->                     <li><a href="#" id="register_button">register</a>                     </li>                     <!-- adding hyper link collapseable menu -->                 </ul>                 <!-- closing list -->             </div>             <!-- closing div holding collapseable menu's data -->         </div>         <!-- closing main header -->     </div>     <!-- closing inner content holder of navbar div --> </div> <!-- closing fixed top navbar holder --> 

css: using bootstrap.min.css

js:

var registerbtn = $("#register_button"); //storing hyperlink of register in variable var = 0; //click count $(registerbtn).on('click', function (e) {     i++;     if (i % 2 === 0) {         $("#register_frm").fadetoggle('fast', function () {             $("#login_frm").fadetoggle('fast');         });         $("#register").text('register');     } else {         $("#login_frm").fadetoggle('fast', function () {             $("#register_frm").fadetoggle('fast');         });         $("#register").text('login');     } }); 

any suggesstions?

change code :

$(function() {     var registerbtn = $("#register_button"); //storing hyperlink of reg....      var = 0; //click count      registerbtn.on('click', function (e) { // since registerbtn reference anchor tag         e.prevendefault(); // prevent default behaviour of anchor tag         .........     }); });