JQuery не работает с начальной загрузкой - PullRequest
Новая
       3

JQuery не работает с начальной загрузкой

0 голосов
/ 02 июля 2018

У меня есть простая форма в html5 с Bootstrap, но мой JQuery не работает правильно, я пытаюсь просто с предупреждениями без ответов. 

<!DOCTYPE html>
<html>
  <head>
  <title>Index Tecatche</title>
  <meta charset="utf-8"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/index.js"></script>
  <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="form-group">
     <label>Email</label>
     <input type="email" class="form-control" id="txt_email" placeholder="Email">
  </div>
  <div class="form-group">
     <label>Password</label>
     <input type="password" class="form-control" id="txt_pass" placeholder="Password">
  </div>
 <input type="button" id="btn_enter" class="btn btn-primary" value="Enter">
 <input type="button" id="btn_register" class="btn btn-primary" value="Register">
 </body>
</html>

JS: 

$("#btn_enter").click(function() {
    alert("hi");
});

Ответы [ 3 ]

0 голосов
/ 02 июля 2018

просто поместите ваш скрипт после тега body и постарайтесь не включать index.js в следующие библиотеки

и попробуйте это 

$(document).ready(function(){
  $("#btn_enter").click(function() {
      alert("hi");
  });
});
<!DOCTYPE html>
<html>
  <head>
  <title>Index Tecatche</title>
  <meta charset="utf-8"/>
  <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="form-group">
     <label>Email</label>
     <input type="email" class="form-control" id="txt_email" placeholder="Email">
  </div>
  <div class="form-group">
     <label>Password</label>
     <input type="password" class="form-control" id="txt_pass" placeholder="Password">
  </div>
 <input type="button" id="btn_enter" class="btn btn-primary" value="Enter">
 <input type="button" id="btn_register" class="btn btn-primary" value="Register">
 </body>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--<script src="js/bootstrap.min.js"></script>-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
</html>
0 голосов
/ 02 июля 2018

Ваш Js-код должен быть помещен в готовый (). 

$(document).ready(function(){
  $("#btn_enter").click(function() {
      alert("hi");
  });
});
0 голосов
/ 02 июля 2018

в вашем пути jquery есть пробел после 3.3.1 .. 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>

измените это на: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Хорошо теперь вы исправили путь jquery, он все еще не работает?

Я сделал нижеприведенный фрагмент кода, который использует тот же код в вашем вопросе (единственное отличие - я использовал CDN для bootstrap.js). Кажется, работает нормально, когда я запускаю его.

Попробуйте обернуть прослушиватель событий в функцию готовности документа. Я обновил фрагмент ниже. 

$(document).ready(function(){
  $("#btn_enter").click(function() {
      alert("hi");
  });
});
<!DOCTYPE html>
<html>
  <head>
  <title>Index Tecatche</title>
  <meta charset="utf-8"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--<script src="js/bootstrap.min.js"></script>-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="js/index.js"></script>
  <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="form-group">
     <label>Email</label>
     <input type="email" class="form-control" id="txt_email" placeholder="Email">
  </div>
  <div class="form-group">
     <label>Password</label>
     <input type="password" class="form-control" id="txt_pass" placeholder="Password">
  </div>
 <input type="button" id="btn_enter" class="btn btn-primary" value="Enter">
 <input type="button" id="btn_register" class="btn btn-primary" value="Register">
 </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...