Javascript onClick event not firing

Question

I am trying to use Javascript to control a web form. Here is all my Javascript code and what I am trying to achieve added to it as well.

$(document).ready(function(){
    function loadPage(url){
        $(".body").fadeOut(400, function(){
            $(".body").load(url);
            $(".body").fadeIn(400);
        });
    }
    loadPage("pages/login.html");

    $("#button").on("click", function(){
        var pageTo = this.name;
        loadPage("pages/" + pageTo + ".html");
    });
});

The code will do more complex things later on, but it doesn't even run the above.

My form looks like this

<FORM>
    <SPAN class='header'>Login</SPAN><BR/>
    <LABEL for='username' class='loginLabel'>Username</LABEL>
    <INPUT type='text' id='username' name='username' value='' />
    <LABEL for='password'class='loginLabel'>Password</LABEL>
    <INPUT type='password' id='password' name='password' value='' />
    <INPUT type='hidden' name='process' value='login' />
    <INPUT type='button' value='Login' name='index' id='button' />
</FORM>

Its a simple login form, but the text does not show up in the console when the button is clicked. I don't want to use a submit button and the JQuery .submit() event because I want the same code to work with multiple types of things, including links and possibly other elements.

Answer 1

You are trying to bind the event handler before the element exists in the page.

Either bind the handler after you added the form by passing a callback to .load:

$(document).ready(function(){
    function loadPage(url){
        $(".body").fadeOut(400, function(){
            $(".body").load(url, function() {
                $("#button").on("click", function(){
                    var pageTo = this.name;
                    loadPage("pages/" + pageTo + ".html");
                });
            });
            $(".body").fadeIn(400);
        });
    }
    loadPage("pages/login.html");
});

or use event delegation (see section Direct and delegated events in the documentation):

$(document).on("click", "#button", function(){
    var pageTo = this.name;
    loadPage("pages/" + pageTo + ".html");
});