2

Код не работает нигде - console.log не срабатывает внутри функции.

В чём ошибка?

$( "#form-login" ).submit(function( event ) {
    console.log('here');
    alert( "Handler for .submit() called." );
    event.preventDefault();
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous">
</script>

<form id="form-login" method="post">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" name='login' type="email" id="login">
        <label class="mdl-textfield__label" for="login">Логин</label>
    </div>

    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" name='password' type="password" id="password">
        <label class="mdl-textfield__label" for="password">Пароль</label>
    </div>

    <div class="mdl-card__actions">
        <button type="submit" class="mdl-button mdl-js-button
            mdl-button--raised mdl-js-ripple-effect mdl-button--accent buttons-login">Вход
        </button>
    </div>
</form>
3
  • сниппет в вопросе работает - выводится и в консоль и алерт, в чем проблема?
    – Grundy
    Commented 2 июл. 2016 в 11:33
  • mybeer.info - исходный код. Не работает. Commented 2 июл. 2016 в 11:36
  • весь необходимый код должен быть непосредственно в вопросе, посмотрите как создать минимальный воспроизводимый пример
    – Grundy
    Commented 2 июл. 2016 в 11:52

1 ответ 1

2

При правке заметил один лишний </div>, в то время как в другом месте его не хватало. После правки кода всё заработало

$( "#form-login" ).submit(function( event ) {
    console.log('here');
    alert( "Handler for .submit() called." );
    event.preventDefault();
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous">
</script>

<form id="form-login" method="post">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" name='login' type="email" id="login">
        <label class="mdl-textfield__label" for="login">Логин</label>
    </div>

    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" name='password' type="password"
            id="password">
        <label class="mdl-textfield__label" for="password">Пароль</label>
    </div>

    <div class="mdl-card__actions">
        <button type="submit" class="mdl-button mdl-js-button mdl-button--raised
            mdl-js-ripple-effect mdl-button--accent buttons-login">Вход
        </button>
    </div>
</form>


Вы указали ссылку mybeer.info
Там не работает jquery, потому что нет $(document).ready

<script>$(document).ready(function() { ... });</script>
7
  • Спасибо, смогу - проверю. Проблема в том, что до этого в теге формы был onsubmit="" и все работало... Неожиданная проблема:( Commented 2 июл. 2016 в 11:38
  • Уточню: в хроме - будет. а в других браузерах нет.. Из-за чего и началась эпопея)) Commented 2 июл. 2016 в 11:39
  • уточните пожалуйста, почему jquery код НЕ будет работать не в пределах этой обёртки? В моём понимании она просто откладывает выполнение js до момента полной прогрузки страницы. Или не так? Просто хочется понять раз и навсегда) Commented 2 июл. 2016 в 19:25
  • 1
    @VyacheslavPotseluyko, не обязательно использовать ready, он для работы при загрузки DOM. Если скрипт загружен в конце html документа, можно использовать $(function() { ... }
    – Doofy
    Commented 2 июл. 2016 в 19:44
  • Еще раз спасибо) Commented 2 июл. 2016 в 21:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.