javascript - event.preventDefault 不起作用

Question

我这里有这个简单的代码，没什么太高级的。

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

无论我单击“发送”按钮，该event.preventDefault功能都不起作用，并且页面加载。

任何想法为什么？

Answer 1

表单具有提交事件，而不是按钮。另外，ID 应该是唯一的，所以tag#id只能是#id.

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

Answer 2

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

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

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

Answer 3

我相信提交事件是针对表单元素的。对于input[type='button']您可能想要使用 click 事件。

Answer 4

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

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

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

Answer 5

尝试使用 return false 代替

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

Answer 6

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

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

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; });