Отправка события jQuery не вызывает действия пользователя
Я пытаюсь добавить универсальную форму прослушивателя события onsubmit к широкому веб-сайту, где я не могу добавить конкретный прослушиватель событий для каждой отдельной страницы.
Событие должно срабатывать для всех элементов формы на странице.
Что я пробовал до сих пор:
$(function() {
$("form").submit(function(event) {
alert("submit");
});
});
Пример страницы дом:
<form method="post">
<input type="text" name="afield" />
<button>
submit!
</button>
</form>
но событие не срабатывает, вы знаете, что я делаю не так? Я не могу редактировать HTML-код формы или создать обработчик событий, ориентированный на конкретные формы (например, по имени / идентификатору).
Спасибо!
3 ответа
Ваша форма отправляется, потому что вам нужно event.preventDefault()
браузер по умолчанию отправить.
Сначала убедитесь, что вы завернули свой код в DOM и
использование .on()
метод с делегированием событий.
Используйте Event.preventDefault
jQuery(function( $ ){ // DOM is now ready and $ alias secured
$(document).on("submit", "form", function(event) { // Future and existent form Elements
event.preventDefault(); // prevent browser to default submit
alert("submit"); // do anything you like
});
});
https://api.jquery.com/ready/
http://api.jquery.com/on/
http://learn.jquery.com/using-jquery-core/document-ready/
https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault
Дополнительно убедитесь, что вы включили библиотеку jQuery и ваши <script>
тег (предпочтительно) прямо перед закрытием </body>
тег.
Добавьте * библиотеку jQuery перед вашим скриптом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$("form").submit(function(event) {
alert("submit");
});
});
</script>
*: кажется мне не хватает. Всегда следите за ошибками консоли.
Ваша форма, кажется, появляется позже, она не существует с самого начала.
$(function() {
$("body").on('submit', "form", function(event) {
alert("submit");
});
});