当我添加一行时无法阻止表单提交

Can not prevent form submit when I add one line

本文关键字：表单提交 一行 添加      更新时间：2023-09-26

I be stacked.我的代码无法阻止提交操作。在我添加this.doSomething();之前，这工作正常。

为什么会这样？我必须使用预防默认吗？

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

感谢您的阅读：）

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

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

这是范围不匹配。

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

由于input按钮上没有doSomething()，脚本中断，因此不再执行要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;
    });
};

演示

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

若要确保事件不会继续，即使出现错误，也不要返回 false，而是改用 e.preventDefault()：

    this.$form.input.submit(function(e) {
        e.preventDefault();
        this.doSomething();
    });
相关文章：