阻止默认事件的preventDefault方法在提交按钮中不起作用。

Question

我有一个包含 html 表单的页面，但当我点击 submit 按钮时会跳转到 insert.php 页面，我不想这样。使用 preventDefault 不起作用。我有以下这段 script:

HTML

<form action="insert.php" method="post">
<input  type="text" name="username" placeholder=""><br />
<input  type="text" name="name" placeholder=""><br />
<input  type="text" name="lastname" placeholder=""><br />
<input id="mail" name="email" type="text" placeholder="E-mail"><br />
<input id="mail_1" type="text" placeholder="reply E-mail"><br />
<input id="password" name="password" type="password" placeholder=""><br />
<input id="password_1"  type="password" placeholder=""><br /> 
<input id="submit" type="submit" value="registration">
</form>

jQuery

$("#submit").click(function(event){
    event.preventDefault();
});

- Val Do

---

PHP和MySQL与此无关（标签已编辑，PHP代码已删除）-请根据问题进行标记，并仅发布相关代码。 - CBroe

我有这样的印象，preventDefault() 在类型为 submit 但是类型为 button 的 <button></button> 上不起作用。 - Francisco Quintero

Answer 1

不是监听按钮点击事件，而是监听 <form> 的提交事件：

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

现代 jQuery（1.7 或更高版本）:

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

- MonkeyZeus

Answer 2

我认为你刚错过了被取消的事件。

$( "#target" ).submit(function( event ) {
  event.preventDefault();

});

- Paulo Lima

Answer 3

问题在于事件正在冒泡，并且正在调用您表单的提交事件。

您应该监听表单的提交事件，而不是监听按钮的点击事件：

$("#formId").submit(function(event){
    event.preventDefault();
});

并在您的表单中添加 id 属性:

<form id="formId" ...

那会使你的表单停止工作。

- SparK

---

将 id="formId" 添加到您的表单。 - SparK

Answer 4

任何未来潜伏在这里的人，我的问题是表单没有在脚本之前加载，因此事件没有绑定。所以我按照以下步骤操作，问题得到解决：

$(window).load(function () {
    $("#submit").submit(function (e) {
        e.preventDefault();
        ...
        ...
    });
}

- DroidHeaven

Answer 5

首先要给你的表单添加一个ID，我将使用 myFormId。

<form id="myFormId"  action="insert.php" method="post">
    <input  type="text" name="username" placeholder=""><br />
    <input  type="text" name="name" placeholder=""><br />
    <input  type="text" name="lastname" placeholder=""><br />
    <input id="mail" name="email" type="text" placeholder="E-mail"><br />
    <input id="mail_1" type="text" placeholder="reply E-mail"><br />
    <input id="password" name="password" type="password" placeholder=""><br />
    <input id="password_1"  type="password" placeholder=""><br /> 
    <input id="submit" type="submit" value="registration">
</form>

然后使用表单 ID：

$('#myFormId').on('click', function (event){ 
     event.preventDefault(); 
});

- Dayan

---

请解释一下.on的含义。 - Val Do