阻止事件默认行为的event.preventDefault无效

Question

我有一个简单的代码，没有太高深的内容。

    $("input#send").submit(function(event){
      event.preventDefault();
    $.ajax({
        type: 'POST',
        url: add.php,
        data: data,
        success: success,
        dataType: dataType
    });
});

每当我点击“发送”按钮时，event.preventDefault函数无效，并且页面会加载。您有任何想法吗？

- Peter Stuart

Answer 1

表单拥有提交事件，而不是按钮。此外，ID 应该是唯一的，所以 tag#id 可以简写为 #id。

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

- pimvdb

---

谢谢，那个有效。我可以问一下吗？我之前在按钮上使用了click函数，但似乎也不起作用？为什么会这样？ - Peter Stuart

@Peter Stuart：您具体是什么意思？在“提交”按钮上放置“click”也可以起作用：http://jsfiddle.net/rKJJU/。 - pimvdb

@PeterStuart 我认为这是因为你没有在 add.php 周围加上引号，请参见我下面的答案。我同意 @pimvdb 的建议，将事件处理程序放在表单本身上，因为您还可以通过键盘使用 enter 键来调用表单提交。 - jessegavin

Answer 2

如果您想阻止表单提交，您需要绑定到表单的submit事件或按钮的click事件并调用event.preventDefault():

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

$('form').find(':submit').bind('click', function (event) {
    event.preventDefault();
});

- Jasper

Answer 3

我认为提交事件适用于 表单 元素。对于一个 input[type='button']，您可能需要使用 click 事件。

- epignosisx

Answer 4

1. 在'add.php'周围添加引号。
2. 将第一行中的选择器更改为包含input#send的表单的id属性。

处理表单上的submit()处理程序而不是输入上的click处理程序的优点是，某些表单可以通过按下回车键（当用户聚焦于表单字段之一时）来提交。如果您没有id属性，请添加一个或使用不同的jQuery选择器来定位表单标记。

$("#myform").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'add.php',
        data: data,
        success: success,
        dataType: dataType
    });
    return false;
});

- jessegavin

Answer 5

尝试使用 return false 代替

$("input#send").submit(function(event) {
    $.ajax({
        type: 'POST',
        url: add.php,
        data: data,
        success: success,
        dataType: dataType
    });
    return false;
});

- Josh Toth

---

不应该有任何区别。 - Felix Kling

在 jQuery 事件处理程序中使用 return false 等同于调用 event.preventDefault(); event.stopPropagation();。 - Jasper

我已经尝试过了，由于ajax的原因它没有起作用。如果我把它放在ajax代码上面，它就可以工作，但是放在下面就不行。无论如何还是谢谢 :) - Peter Stuart

Answer 6

如果你正在使用preventDefault，我认为这意味着你不想要默认的提交操作。我会使用不同的事件而不是使用.submit。对我来说，你想要拦截的不是提交操作，而是通常会导致提交的点击事件。

$('#inputSend').on('click', function(event) {
  event.preventDefault();
  //the rest
});

- Greg Pettit

Answer 7

如果 return false 和 event.stopPropagation() 都不起作用，可以尝试以下方法。使用 .on() 可以使提交函数可访问。一旦将 .submit() 更改为 .on("submit"..)，您可以使用 return false 或 e.stopPropagation()。

$(document).on("submit", "input#send", function(event) {
    event.stopPropagation();
    $.ajax({
        type: 'POST',
        url: add.php,
        data: data,
        success: success,
        dataType: dataType
    });
    return false; });

- wag0325