событие.preventDefault не работает

У меня здесь есть этот простой код, ничего слишком сложного.

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

Когда бы я ни нажал на кнопку "Отправить", функция event.preventDefault не работает, и страница загружается.

Есть идеи, почему?

7 3
javascript jquery events ajax preventdefault

7 ответов:

Форма имеет событие submit, а не кнопку. Кроме того, идентификатор должен быть уникальным, поэтому tag#id может быть просто #id.

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

Вам нужно привязаться к событию формы submit или к событию кнопки click и вызвать event.preventDefault(), Если вы хотите остановить отправку формы: 

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

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

Я считаю, что событие submit предназначено для элементаform . Для ввода [type= 'button'] можно использовать событие click.

2
  1. Добавьте кавычки вокруг 'add.php'
  2. измените селектор в первой строке на атрибут 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;
});
1

Попробуйте использовать return false вместо

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

Если вы используете preventDefault, я предполагаю, что это означает, что вы не хотите отправлять действие по умолчанию. Я бы просто использовал другое событие вместо использования .представить. Для меня это не действие submit, которое вы хотите перехватить, а скорее щелчок, который обычно вызывает submit.

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

Если и return false, и event.stopPropagation() не работают, попробуйте следующий метод. Использование .on() сделает функцию submit доступной. Как только вы измените .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; });
0