How do I get backbone to bind the submit event to a form?

Question

I'm using the following code to create the view:

LoginForm = Backbone.View.extend({

    tagName :"form"
    ,id : "login-form"
    ,className :"navbar-form"
    ,initialize: function () {
            this.model = new StackMob.User();
            this.render();
    }
    ,render: function () {
            $(this.el).html(this.template());
            return this;
    }
    ,events : {
            "change" : "change"
            ,"submit #login-form" : "login"
    }
    ,login : function( event) {
            event.preventDefault();
            var self = this;
            this.model.login(true, {
                    success: function( model) {
                            app.alertSuccess( "User logged in");
                            self.render();
                    }
                    ,error: function( model, response) {
                            app.alertError("Could not login  user: " + response.error_description);
                    }
            });
            event.currentTarget.checkValidity();
            return false;
    }
// rest of code

And the template:

<input name="username" class="span2" type="email" placeholder="Email" required >
<input name="password" class="span2" type="password" placeholder="Password" required >
<button id="login-button" type="submit" class="btn">Sign in</button>

When I bind on the button, the login function gets called. Binding on the form submit event, the login function does not get called. I can also get the form to bind if the id & form tag are part of the template, which is not what I want to do here.

How do I bind on the form submit in this case?

Answer 1

"submit #login-form" : "login"

I think Backbone will search for this id among the descendants only. So it will never match your own view element. Why don't you just use:

"submit": "login"

As you did for change.
Gonna check Backbone's code just to be sure.

Edit:
If you put a selector, Backbone will call

this.$el.on(event, selector, method);

instead of

this.$el.on(event, method);

And the on method of jQuery will instead apply the selector to the descendants of the element only, excluding the element itself.