VS Code中JavaScript无法关联HTML的批量邮件发送器问题

问题 #

我正在学习HTML编码，复刻Brave Coder的批量邮件发送器时遇到了问题——点击“Add More”按钮无法添加“To email”输入框。我对照视频中的代码修改后，JavaScript始终无法和index.html正常关联。我已经确认app.js的引用路径正确（放在body底部，也试过头部和顶部），文件路径是“~/Email/app.js”，但代码就是不执行，怀疑是函数调用、div类或按钮的问题，但找不到具体原因。

HTML代码 #

<!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">
    <!--CSS-->
    <link rel="stylesheet" href="styles.css">
    <title>Bulk Email Sender</title>
</head>
<body>
    <div class= "wrapper">
        <div class="alert">Test</div>
          <form class="form">
            <div class="input-box">
              <input type="text" placeholder="name" class="input"
              required/>
            </div>
            <div class="input-box">
                <input
                  type="email"
                  placeholder="From :(email)"
                  class="input"
                  required/>
            </div>
            <div class="multiple-fields" id="multipleFields">
                <div class="input-box">
                    <input
                      type="email"
                      placeholder="To:(email)"
                      class="input"
                      required/>
                    <button type="button" id="addMore" class="my-btn btn-sm">
                      Add More
                    </button>
                </div>
            </div>
            <div class="input-box">
                <input type="text" placeholder="Reply-to: (optional)"
                class="input">
            </div>
            <div class="input-box">
                <input type="text" placeholder="Subject: (First, Last)"
                class="input" required>
            </div>
            <div class ="input-box">
                <textarea class ="input"
                placeholder= "message"></textarea>
            </div>
            <div class="input-box">
                <input type="file" placeholder="file"
                class="input">
            </div>
            <button 
              type="submit" 
              class="my-btn"
              style="width: 100%; margin-top: 15px"
            >
              Send Mail
            </button>
          </form>
        </div> 

    <!--jQuery-->
    <script src="js/jquery.min.js"></script>

    <!--App.js-->
    <script src="Email/app.js"></script>

   </body>
</html>

JavaScript代码（原错误版本） #

$(document).ready(function () {
    $("#addMore").on("click", function() {
            var html = `<div class="input-box"><input type="email"
        placeholder ="To:(email)" class="input" required /></
        div>`;

            $("#multipleFields").on("click", (html));
    });
});

解决思路 #

• 排查资源加载情况：打开浏览器开发者工具（F12）的「网络」标签，检查jquery.min.js和app.js是否成功加载，有没有404错误。如果出现404，说明文件路径不正确，需要根据实际项目结构调整引用路径。
• 修复JavaScript核心逻辑：原代码中$("#multipleFields").on("click", (html));是错误的，这是给容器绑定点击事件，而非添加新元素。正确做法是使用append()方法将新的输入框HTML插入到multipleFields容器中，修正后的代码如下：

  $(document).ready(function () {
      $("#addMore").on("click", function() {
          var html = '<div class="input-box"><input type="email" placeholder="To:(email)" class="input" required /></div>';
          $("#multipleFields").append(html);
      });
  });
  

  另外注意模板字符串里的转义字符可以简化，不需要用"，直接用双引号或者单引号包裹即可。
• 优化按钮布局（可选）：当前“Add More”按钮放在第一个输入框的input-box内，添加新输入框后布局会显得混乱，建议将按钮移到multipleFields容器的外侧，保持按钮位置固定，提升用户体验。
• 利用控制台调试：在开发者工具的「控制台」标签查看是否有语法错误或未定义变量的提示，这些信息能快速定位代码执行失败的原因。

内容的提问来源于stack exchange，提问作者Joe Blanshan