javascript - 添加一行时无法阻止表单提交

Question

我很累。我的代码无法阻止提交的默认操作。在我添加 this.doSomething(); 之前，一切正常。

为什么会这样？我必须使用 preventDefault 吗？

工作代码: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"));
});

感谢阅读:)

Answer 1

在您的submit 回调函数中，this 不再指代您的对象，而是指元素本身。

因此导致异常，因为该元素没有 doSomething 属性，并且您的 return false 被跳过。

相反，这样写:

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

参见 http://jsfiddle.net/xgGGx/1/一个工作示例表明它只是导致错误的范围问题。

这就是脚本调试工具的用途 - 报告的错误应该使错误相当明显......