无法在按钮单击时快速显示警报消息答案

【问题标题】：Unable to show alert message in express on button click无法在按钮单击时快速显示警报消息
【发布时间】：2021-08-06 23:56:50
【问题描述】：

我正在使用 jQuery 进行按钮单击事件并尝试在 ejs 文件中显示警报，但警报消息未显示下面是我的代码：

register.ejs

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<title><%= title %></title>

<style>
  
    h1 {
     text-align: center;
     margin-top:50px; 
     }
     
     .form{
       margin-top:50px;
       margin-left:30%;
       margin-right:30%;
     }

     input{
       margin-top:10px;
     }
     
     button{
        margin-top:20px;
     }

</style>

</head>
<body class="container">

<h1><%= title %></h1>

<div class="form">

    <form>

    <input name="nam" class="form-control" type="text" placeholder="Name" aria-label="default input example">
    <input name="mail" class="form-control" type="text" placeholder="Email" aria-label="default input example">
    <button class="btn btn-primary">SUBMIT</button> 
    
    </form>

</div>

 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

  <script type="text/javascript">
     
     $('.btn').click(function(){
           alert('Hello');

     });

</script>

</body>
</html>

有人告诉我上面的代码有什么问题。

【问题讨论】：

类选择器 .btn 必须用引号括起来...可以是一对单引号或双引号
我试过了，但它不起作用
我遇到了一个问题，实际上我在添加 JQuery 库后忘记添加它工作正常。
我总是倾向于错过这个：默认情况下，button 将提交阻止您的代码运行的表单。请将type="button" 添加到您的按钮

标签： javascript jquery node.js ejs

【解决方案1】：

您尚未在代码中实现 JQuery 库。这是要实现的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />

    <title><%= title %></title>

    <style>
      h1 {
        text-align: center;
        margin-top: 50px;
      }

      .form {
        margin-top: 50px;
        margin-left: 30%;
        margin-right: 30%;
      }

      input {
        margin-top: 10px;
      }

      button {
        margin-top: 20px;
      }
    </style>
  </head>
  <body class="container">
    <h1><%= title %></h1>

    <div class="form">
      <form>
        <input
          name="nam"
          class="form-control"
          type="text"
          placeholder="Name"
          aria-label="default input example"
        />
        <input
          name="mail"
          class="form-control"
          type="text"
          placeholder="Email"
          aria-label="default input example"
        />
        <button class="btn btn-primary">SUBMIT</button>
      </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
      integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
      crossorigin="anonymous"
    ></script>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
      integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
      crossorigin="anonymous"
    ></script>

    <script type="text/javascript">
      $(".btn").click(function () {
        alert("Hello");
      });
    </script>
  </body>
</html>

【讨论】：

是的，我错过了 JQuery 库，谢谢！