jquery - 阻止表单通过 event.preventDefault() 提交；不工作

Question

我正在使用 jQuery 提交我的表单变量，并且我试图阻止表单通过通常的方式提交（单击提交按钮或在其中一个字段上按 enter）

我有这个：

$('#form').submit(function(){
    event.preventDefault();
});

但它似乎不起作用我的表单仍在提交，进入 process.php 页面..

Answer 1

如果您唯一需要做的就是阻止默认操作，则可以提供false而不是函数：

$('#form').submit(false);

Answer 2

尝试return false代替event.preventDefault()或接受event作为函数的参数。

$('#form').submit(function(event){
  event.preventDefault();
});

不知道为什么有些人认为这不再有效，但这里有一个例子表明它仍然有效。

https://jsfiddle.net/138z5atq/

注释掉事件处理程序，它会发出警报。

关于stopPropagation()并且stopImmediatePropagation()他们根本不会阻止表单提交。他们只是防止事件冒泡dom。

Answer 3

另一种方式是：

$('#form').submit(function(){

   //some code here

   return false;
});

Answer 4

我无法获得发布的答案，并且只提供 false 对我来说不是一个选择。我发现这个工作：

$(document).on('submit', '#form', function(event){
    event.preventDefault();
});

Answer 5

我还注意到（至少在 Chrome 上），如果您在 Promise 或这样的异步函数之后运行 e.preventDefault() ：

submitEvent(e) {

    this.sendData(formData).then((json) => {
        ...
    })
    .catch((error) => {
        ...
    });

    e.preventDefault(); // OPS. Executed but not working ????!!!
}

这个以前的行不通。理想情况下，您必须在任何其他代码之前声明它：

submitEvent(e) {

    e.preventDefault(); // WORKING !! :-)

    this.sendData(formData).then((json) => {
        ...
    })
    .catch((error) => {
        ...
    });
}

Answer 6

为了扩展 steveukx 的回答，我通常喜欢这样做：

$('#form').submit(function(event){

    // The method's values go here

    event.preventDefault();

}, false); // This is a boolean (It converts all the values contained in the callback to a boolean value)