Wie deaktiviere ich das „Senden'-Verhalten einer Schaltflächenbeschriftung innerhalb einer Formularbeschriftung?

Question

<form action="">
  <button>click</button>
</form>

Das Standardverhalten der Schaltfläche

innerhalb eines Formulars besteht darin, das Formular abzuschicken.

Wie deaktiviere ich das Sendeverhalten dieser Schaltfläche?

Answer 1

有时候你想要保留一个 submit 按钮的细节（例如，在移动设备上，只有当按钮是表单的一部分且类型为 submit 时，才能通过键盘触发 submit 按钮）。在这种情况下，你需要阻止按钮的默认行为。

使用 jQuery 1.7+（使用 .on - 我强烈建议阅读文档 - 使用 .on 有许多细微差别可以极大地影响性能）

$(document).on("click", "button", "event", function(evt) {
    evt.preventDefault();
    ...
}

使用旧版本的 jQuery...

$("#button-id").bind("click", function(evt, ui) {
    evt.preventDefault();
    ...
}

请注意，你可以使用任何选择器（按类、元素类型等选择）或绑定事件的方法（而不是使用 .bind，使用适合你的 jQuery 版本的 .live、.delegate 等）。

Answer 2

在它上面添加 type="button"：

<button type="button">Click</button>

---

可用的类型有：

• "submit"：默认值。提交表单。
• "reset"：重置表单的输入。
• "button"：无操作。

一个好的参考：https://developer.mozilla.org/en/DOM/HTMLButtonElement