Отправка события 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");
    });
});
Другие вопросы по тегам