The code does not work anywhere - console.log does not work inside the function.

Where is the mistake?

 $( "#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>
  • the snippet in question works - displayed in the console and alert, what's the problem? - Grundy
  • mybeer.info - source code. Does not work. - Vyacheslav Potseluyko
  • all the necessary code should be directly in the question, see how to create a minimal reproducible example - Grundy

1 answer 1

When editing, I noticed one extra </div> , while in another place it was not enough. After editing the code, everything worked

 $( "#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>

You have indicated mybeer.info link
Jquery does not work there, because there is no $(document).ready

 <script>$(document).ready(function() { ... });</script>
  • Thanks, I can - check it out. The problem is that before this, the form tag was onsubmit = "" and everything worked ... An unexpected problem :( - Vyacheslav Potseluyko
  • I will specify: in chrome - will be. and in other browsers there is no .. Because of what the epic began)) - Vyacheslav Potseluyko
  • Please specify why the jquery code will NOT work not within this wrapper? In my understanding, it simply postpones the js execution until the page is fully loaded. Or not? Just want to understand once and for all) - Vyacheslav Potseluyko
  • one
    @VyacheslavPotseluyko, it is not necessary to use ready , it is for work when loading DOM. If the script is loaded at the end of the html document, you can use $(function() { ... } - Mr. Black
  • Thanks again) - Vyacheslav Potseluyko