preventDefault()在'提交'事件上不起作用。

Question

我无法通过事件处理程序 on('submit') 使用 event.preventDefault() 阻止表单提交。

 $("section.shopping-cart").on('submit','form.adjustform input[type="submit"]', function(event)     {   

      // code

      event.preventDefault();
 }) 

我曾经尝试使用on('click')并使用return false使其正常工作。尽管我已经阅读了上述方法是正确的做法...

谢谢， Cam

- Cam

Answer 1

您正在使用委托的方式来使用on，但选择器选择的不是表单元素：

// Here ------------------------------------------------v
$("section.shopping-cart").on('submit','form.adjustform input[type="submit"]', ...

提交事件发生在表单元素上（至少是你可以有用地取消的表单元素）。指定一个表单元素：

submit 事件发生在 form 元素上（至少，你可以有用地取消的那个表单元素）。指定一个 form 元素：

$("section.shopping-cart").on('submit','form.adjustform', ...

这是一个示例，因为选择器选择了非表单元素而无法工作： 示例 | 源代码 这是已经更正的示例，可以正确地工作： 示例 | 源代码 （注意：表单在新窗口中打开，只是为了避免将您带离代码。）

- T.J. Crowder

---

太棒了，谢谢！我之前没有考虑到on()函数中事件和选择器之间的关系。现在明白了。 - Cam

我的选择器通过ID选择表单元素，但它无法阻止表单提交。我认为jQuery在委托事件方面存在一个bug。委托的表单提交事件无法被取消，而直接绑定的处理程序可以很好地停止它。当委派处理程序运行时，表单已经提交到服务器，因此甚至没有机会调用preventDefault。 - Triynko

@Triynko：不，这不是真的。 select 并没有出现问题，jQuery事件委托也一样：http://output.jsbin.com/suwetujoyo 委托事件的默认行为可以被阻止，因为它在事件冒泡完成且未被阻止时才执行。 - T.J. Crowder

Answer 2

提交事件发生在表单上，而不是提交按钮上。

要么将事件绑定到表单上：

$("section.shopping-cart").on('submit','form.adjustform', function(event)     {

或者绑定提交按钮的点击事件：

$("section.shopping-cart").on('click','form.adjustform input[type="submit"]', function(event)     {

（然而，某些浏览器也允许按回车键提交表单，在这种情况下，它不会触发点击事件。）

- Guffa

---

此外，取消 submit 按钮的 click 事件并不能可靠地阻止表单的提交。 - T.J. Crowder

@T.J.Crowder：那什么情况下会阻止表单的提交呢？ - Guffa

@ Guffa：嘿，我没有编写浏览器中的事件处理。:-)挂钩并防止单击提交按钮在跨浏览器上无法可靠地工作，我记得几年前遇到过这个问题。它肯定应该工作。现在可能会做到，但以前不是这样。 - T.J. Crowder

@T.J.Crowder：停止点击事件应该可靠地停止提交。也许是使用按钮以外的方式提交按钮（我在回答中提到的）是问题所在？ - Guffa

@ Guffa：我不这么认为，当然，这是另一个不使用click的原因，但我相信即使在实际点击按钮时，我们仍然会在某些浏览器中看到它。再次强调：我完全同意它应该停止提交，我说的是几年前我在至少一个主要浏览器中看到的错误。 （似乎不是IE，我刚刚检查了IE6，一切正常。） - T.J. Crowder

按下回车键并不等同于点击，但它会提交表单。同时，委托事件似乎无法阻止表单的提交。 - Triynko