jQuery onSubmit object form

Question

Basically I'm trying to create an object to handles a basic ajax login form. Everytime you submit the form, the console should log 'form' but at the moment it is only executed once, when the form loads. What am I doing wrong?

Here's the code

Login = {

    init: function () {
        var $self = this;
        $('form').on('submit', $self.on_submit());

    },
    on_submit: function () {
        console.log('form');
        return false;
    },
    do_login: function () {
        console.log('login');
    }

}

$(document).ready(function () {

    Login.init();

});

And here's the testing URL

http://jsfiddle.net/srr33/

Thanks

Answer 1

error is here:

$('form').on('submit', $self.on_submit());

do it right way:

$('form').on('submit', $self.on_submit);

Instead of assigning event handler you're doing function call

Answer 2

DEMO

$('form').on('submit', $self.on_submit);

Answer 3

.on('submit', $self.on_submit());

This is the return value of on_submit (i.e false), not a function. Do :

.on('submit', $self.on_submit);

Or

.on('submit', function() { $self.on_submit(args); });

If you need to pass parameters.