I have a router like this, as main entry point:

window.AppRouter = Backbone.Router.extend({
    routes: {
        '': 'login'
    },
    login: function(){

        userLoginView = new UserLoginView();
    }
});

var appRouter = new AppRouter;
Backbone.history.start({pushState: true});

I have a model/collection/view like this:

window.User = Backbone.Model.extend({});

window.Users = Backbone.Collection.extend({
    model: User
});

window.UserLoginView = Backbone.View.extend({

    events: {
        'click #login-button': 'loginAction'
    },

    initialize: function(){
        _.bindAll(this, 'render', 'loginAction');
    },

    loginAction: function(){
        var uid = $("#login-username").val();
        var pwd = $("#login-password").val();

        var user = new User({uid:uid, pwd:pwd});
    }
});

And body of my HTML looks like this:

<form action="#" method="POST" id="login-form">
    <p>
        <label for="login-username">username</label>
        <input type="text" id="login-username" autofocus />
    </p>
    <p>
        <label for="login-password">password</label>
        <input type="password" id="login-password" />
    </p>
    <a id="login-button" href="#">Inloggen</a>
</form>

Note: The HTML comes from Node.js using express.js, should I maybe wait for a document ready event somewhere?

Edit:

I have tried this, create the view when ready, did not solve the problem.

    $(function(){
        userLoginView = new UserLoginView();
    });