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只能是#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

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

处理表单上的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并且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; });

Answer 6

请尝试使用return false

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

Answer 7

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

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