Отправка формы JQuery обновляет страницу
Подскажите, пожалуйста, почему этот код не работает? Это просто обновление страницы.
jQuery(document).on('submit', '.comment-form', function (event) {
alert('hello')
event.preventDefault();
const form = jQuery(this);
const id = form.attr('id');
console.info(id)
//do stuff ...
return false;
});
У меня есть две такие формы на одной странице. Они добавляются динамически с помощью Handlebars.
<form class = "column-form comment-form" id = "{{_id}}">
<div class = "">
<div class = "col-12-10 col-medium-12-12 comment-content">
<input placeholder = "Add a comment" type = "text" value = "" id = "comment-{{_id}}" name = "">
</div>
<div class = "col-12-2 col-medium-12-12 flex comment-submit">
<input value = "Submit" type = "submit" />
</div>
</div>
</form>
* Редактировать *
jQuery(document).on('submit', '.comment-form', function (event) {
event.preventDefault();
alert('hello')
});
Я не понимаю о чем ты. Я просто хочу, чтобы он предупредил "привет". Просто чтобы увидеть, что он попадает в этот прослушиватель событий, и он не ... пробовал все.
Простите. Была часть // do stuff, поэтому я подумал, что, возможно, форма действительно что-то отправила ...
Вы дублируете идентификаторы на странице?
"не работает" - вы видите alert('hello')?
Регистрируете ли вы этот обработчик после завершения загрузки DOM?
Я так не думаю. Но какое это имеет значение? Я слушаю отправку .comment-form, а затем использую идентификатор формы. Я бы просто отправлял с неправильным идентификатором.
@ Игорь нет бдительности ...
@Amy Мой код находится в функции document.ready
@Ciprian это не обязательно, если оно находится после тега скрипта библиотеки jQuery
странно ... я все прокомментировал внутри и оставил только то, что было в моей редакции ... (я ненавижу, что вы не можете правильно форматировать код в комментариях SO), и я получаю предупреждение. Кажется, что-то еще его ломает. Я проверю. Спасибо за помощь. :)
@Ciprian ищет ошибки в консоли браузера во время загрузки страницы
Я просто попробовал этот код, и он работает нормально и не обновляет страницу ... если вы не забыли установить ссылку на библиотеку jQuery или не оставили фрагмент кода, который переопределяет тот, который вы нам показали.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Судя по тому, что вы не видите предупреждения, в отсутствующем коде есть синтаксическая ошибка, из-за которой парсер отбрасывает весь блок скрипта.
jQuery(document).on('submit', '.comment-form', function(event) {
alert('hello')
event.preventDefault();
const form = jQuery(this);
const id = form.attr('id');
console.info(id)
//do stuff ...
return false;
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class = "column-form comment-form" id = "{{_id}}">
<div class = "">
<div class = "col-12-10 col-medium-12-12 comment-content">
<input placeholder = "Add a comment" type = "text" value = "" id = "comment-{{_id}}" name = "">
</div>
<div class = "col-12-2 col-medium-12-12 flex comment-submit">
<input value = "Submit" type = "submit" />
</div>
</div>
</form>Э-э, а чем ваш ответ отличается от вопроса ОП?
Я не вижу разницы
нет никакой разницы, это демонстрирует, что здесь работает простой случай, что дает ОП уверенность в представленном коде и возможность искать ошибки в другом месте
Среда
Зачем говорить людям искать отличия в первой строке вашего ответа, если их нет? Это похоже на загадку «Где Уолдо», в которой нет Уолли.
У меня была такая же ошибка с моим кодом, не волнуйтесь - это легко исправить.
Вы пытались добавить:
onsubmit = "return false;"
Ваш код должен выглядеть так:
<form onsubmit = "return false;" class = "column-form comment-form" id = "{{_id}}">
<div class = "">
<div class = "col-12-10 col-medium-12-12 comment-content">
<input placeholder = "Add a comment" type = "text" value = "" id = "comment-{{_id}}" name = "">
</div>
<div class = "col-12-2 col-medium-12-12 flex comment-submit">
<input value = "Submit" type = "submit" />
</div>
</div>
</form>
onsubmit = "return false;" отличается от event.preventDefault(); и return false;, которые сейчас используются?
Возможно, это проблема проверки данных?