2

我堆积如山。我的代码无法阻止提交的默认操作。在我添加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"));
});

谢谢阅读：）

4

3 回答 3

2

这是范围不匹配。

this.$form.input.submit(function() { //here "this" is ReserveUI
    this.doSomething(); //here "this" is input button
    return false;
});

并且由于没有doSomething()oninput按钮，因此脚本会中断，因此不再执行 to 的部分return false。

这是您可以解决此问题的一种方法

ReserveUI.prototype._eventify = function() {
    var $this = this; //create a reference to the object
    this.$form.input.submit(function() {
        $this.doSomething(); //Now call the object method
        return false;
    });
};

演示

于 2012-04-26T11:43:05.973 回答
2

在您的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/的工作示例，该示例表明这只是导致错误的范围问题。

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

于 2012-04-26T11:36:38.030 回答
0

听起来您的doSomething代码中有错误（我认为这不仅仅是return false在您的程序中）。

为了确保事件不会继续，即使有错误，也不要返回 false 而是使用e.preventDefault()：

    this.$form.input.submit(function(e) {
        e.preventDefault();
        this.doSomething();
    });
于 2012-04-26T11:37:40.057 回答