Question

I am stacked. My code can not prevent defaut action of submit. This was working fine until I add this.doSomething();.

Why this happens? Do I have to use preventDefault?

working code: http://jsfiddle.net/WwW5R/

HTML:

<div id="container">
    <form action="" method="post" id="input">
            <input type="submit">
    </form>
</div>

JavaScript:

$(function() {
    var ReserveUI = function($el) {
        this.$form = {
            input: $el.find('#input')
        };
        this._eventify();
    };

    ReserveUI.prototype.doSomething = function() {
        return false;
    }

    ReserveUI.prototype._eventify = function() {
        this.$form.input.submit(function() {
            this.doSomething(); //if comment out this line, it works
            return false;
        });
    };
    var UI = new ReserveUI($("#container"));
});

thanks for reading:)

Answer 1

In your submit callback function, this no longer refers to your object, but to the element itself.

It’s therefore causing an exception because the element has no doSomething property, and your return false is skipped.

Instead, write this:

ReserveUI.prototype._eventify = function() {
    var self = this;
    this.$form.input.submit(function(e) {
        e.preventDefault(); // cancels event even if subsequent lines fail
        self.doSomething();
    });
};

See http://jsfiddle.net/xgGGx/1/ for a working example showing that it’s just the scope issue causing the bug.

This is what script debugging tools are for – the reported error should have made the fault reasonably obvious…