Click not working in any condition

Question

I have just a simple hyperlink on which when I am trying to add an click() event handler it is not working. I tried, .on(), .live(), .delegate() none of them worked. How can I do it?

I cannot make a fiddle becuase I don't know why my bootstrap.min.css is not getting included in the external resources section.

Please tell me any 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 a fixed to the top navbar with no bottom margin and a nice little shadow and increasing the height -->
    <div class="navbar-inner" style="border-radius: 0;min-height: 50px; ">
        <!-- Creating the inner content of navbar and increasng it's height aswell to match the 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> 
                <!-- The collapseable menu icon(becuase the three `icon-bar` make an icon :P) -->
            </button>   <a class="brand" href="#"><img src="img/logo.png"
                    style="height: 25px;" /> </a> 
            <!-- adding the logo to the header -->
            <div class="nav-collapse collapse pull-right">
                <!-- div holding collapseable menu's data -->
                <ul class="nav">
                    <!-- creating a list to be created in the collapseable menu -->
                    <li><a href="#" id="register_button">Register</a>
                    </li>
                    <!-- adding an hyper link to the collapseable menu -->
                </ul>
                <!-- closing the list -->
            </div>
            <!-- closing the div holding collapseable menu's data -->
        </div>
        <!-- closing the main header -->
    </div>
    <!-- closing inner content holder of navbar div -->
</div>
<!-- closing the fixed to top navbar holder -->

CSS: Using bootstrap.min.css

JS:

var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 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?

Answer 1

Change your code :

$(function() {
    var registerBtn = $("#register_button"); //storing the hyperlink of reg....

    var i = 0; //click count

    registerBtn.on('click', function (e) { // since registerBtn is a reference to anchor tag
        e.prevenDefault(); // prevent default behaviour of anchor tag
        .........
    });
});

Answer 2

It's probably executing the handler binding before the element is created in the DOM. Either move the code to the end of the document (after the element has been created), or wrap it inside a ready event:

$(function() {
    var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
    var i = 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');
        }
    });
});