时间戳

首页 > 解决方案 > JQuery 不适用于引导程序

jquery - JQuery 不适用于引导程序

问题描述

我在带有 Bootstrap 的 html5 中有一个简单的表单，但是我的 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");
});

标签： jqueryhtml

解决方案

只需将您的脚本放在 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>

推荐阅读