javascript - 使用 Bootstrap 的 Node Express 无法触发按钮单击事件

问题描述

Node 和 ExpressJs 的新手。我正在使用 ExpressJS 和 Bootstrap 创建一个 Nodejs 应用程序，如下所示：<br/>

使用 VSCode。<br/>
工具：使用 npm 安装 express 和 npm init 创建项目

问题：<br/> 单击 btnLogin 时，没有触发事件或没有执行代码。请帮助解决这个问题。在 VSCode 中，如何关联 $？

--- 目录设置

  TestProj<br/>
   |<br/>
   |- node_modules<br/>
   |- main.js<br/>
   |- index.js<br/>
   |<br/>
   |- views<br/>
    &nbsp;&nbsp; |- design_Files<br/>
    &nbsp;&nbsp; |- signup.html<br/>

-------- 节点的 index.js：

  const express = require('express');
  const app = express();
  const path = require ('path');
  app.use(express.static(path.join(__dirname, 'views')));

  var router = express.Router();
  app.use('/', router);

  router.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'views', 'signup.html'));
  });

  app.listen(5000,() => console.log('Server started'));

----------------------- Html 和 main.js

window.$ = window.jQuery

   $("#btn-login").click(function() {
  
      var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
      var email = $("#email").val();
      var password = $("#password").val();
  
      if(email != "" && password != "")
      {
  
       if(email.match(mailformat))
       {       
            //var result = firebase.auth().signInWithEmailAndPassword(email,password)
  
             result.catch(function(error)
             {
                var errorCode = error.code;
                var errorMessage = error.message;
           
                window.alert("Message :" + errorMessage);
   
             });
         } else {
  
             window.alert("Please enter a valid email");  
         }
       
  
       }else {
  
        window.alert("please fill out all required fields");  
       }
  
  });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign up</title>
          
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

      <!-- MATERIAL DESIGN ICONIC FONT -->
    <link rel="stylesheet" href="design_files/fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">

      <!-- STYLE CSS -->
    <link rel="stylesheet" href="design_files/css/style.css">

</head>

<body>
 <div class="wrapper" style="background-image:url('design_files/images/registerback.jpg')">

     <div class="inner">
           <div class="image-holder">
            <img src="design_files/images/registration-form-1.jpg">
            </div>

            <form action="">
              <h3> Register</h3>
    
              <div class="form-wrapper">
                   <input id="email" type="email" placeholder="Email Address" class="form-control">
                     <i class="zmdi zmdi zmdi-email"></i>
              </div>
    
                <div class="form-wrapper">
                  <input id="password" type="password" placeholder="Password" class="form-control">
                    <i class="zmdi zmdi zmdi-lock"></i>
                </div>
    
                <div class="form-wrapper">
                  <input id="confirmPassword" type="password" placeholder="Confirm Password" class="form-control">
                   <i class="zmdi zmdi zmdi-lock"></i>
                </div>
    
                <div class="form-group container-login100-form-btn">
                  <button id="btn-signup" type="button">
                    Register
                    <i class="zmdi zmdi-arrow-right"></i>
                  </button>   
               </div>
                 
               <div class="w-full text-center" style="margin-top:49%; font-size: 15px;">
    
                 <a href="signin.html" class="text-dark">
                    Already have an account?
                  </a>
                </div>
              
          </form>         
     </div> 
   
  </div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<scipt src="main.js"></script>

</body>
</html>

标签： javascriptnode.jsbootstrap-4

$("#btn-signup").click(function(e) { e.preventDefault(); var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/; var email = $("#email").val(); var password = $("#password").val(); if(email != "" && password != "") { if(email.match(mailformat)) { //var result = firebase.auth().signInWithEmailAndPassword(email,password) result.catch(function(error) { var errorCode = error.code; var errorMessage = error.message; window.alert("Message :" + errorMessage); }); } else { window.alert("Please enter a valid email"); } }else { window.alert("please fill out all required fields"); } });

javascript - 使用 Bootstrap 的 Node Express 无法触发按钮单击事件

问题描述

解决方案

推荐阅读