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

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

Answer 4

在'add.php'
将第一行中的选择器更改为包含id的表单的input#send属性。

在表单上处理submit()处理程序而不是输入上的click处理程序的优点是可以通过按Enter键提交某些表单（当用户专注于其中一个时）表格字段）。如果您没有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; });

event.preventDefault不起作用

7 个答案: