Javascript 事件应触发多次，但仅触发一次

Question

按钮上的点击事件仅在第一次被调用时触发一次，我不知道为什么会这样，我使用的是最新版本的 socket.io，截至 2021 年 11 月 2 日的快递和护照（dd /毫米/年）。

我正在尝试构建一个实时聊天 web 应用程序，当用户单击按钮时，它应该在消息框中显示他的消息并应用名为myMsg(name, body)的 function ，我没有问题我认为会发出，因为仅在第一次触发事件时才成功将味精发送到另一端。

客户端JS：

const msgbox = (name, body)=>{
  const element = `<div class="message-recieved">
  <p><strong>${name}</strong></h>
  <p>${body}</p></div>`;
  document.querySelector(".scroll").insertAdjacentHTML("beforeend", element);
}

const myMsg = (name, body) =>{
  const element= `<div class="msg-sent ml-auto">
  <p><strong>${name}</strong></p>
  <p>${body}</p></div>`;
  document.querySelector(".scroll").innerHTML += element;
}


$(".button").click(function(event){
  const userId = event.target.value;
  const msg = {
    userId: userId,
    body: document.querySelector(".message").value
  };
  if(msg.body !== null){
    const name = document.querySelector(".active").textContent;
    myMsg(name, msg.body);
    socket.emit("publicMessage", msg);
  }
  return false;
});

socket.on("publicMessage", function(msg, name){
  msgbox(name, msg.body);
});

应用程序JS：

io.on('connection', function(socket) {
  console.log("Made socket connection");
  socket.on("publicMessage", function(msg) {
    User.findOne({
      _id: msg.userId
    }, function(err, found) {
      if (found) {
        found.messages.push(msg.body)
        socket.broadcast.emit("publicMessage", msg, found.fullName);
      }
    })
  });
});

我的 HTML：

<form class="">
      <div class="input mr-auto ml-auto">
          <div class="input-group">
            <input class="message" value="" type="text" class="form-control" placeholder="Message" aria-label="Message" aria-describedby="message">
            <div class="input-group-append">
              <button class="btn btn-outline-primary button" type="button" name="button" value="<%=userId%>" id="button-addon2">Send</button>
            </div>
          </div>
      </div>
    </form>

我的应用 JS 设置代码：

const express = require("express");
const bodyParser = require("body-parser");
const socket = require('socket.io');
const app = express();
const activeUsers = new Set();
const Users = [];
const ejs = require('ejs');
const mongoose = require("mongoose");
const session = require('express-session')
const passport = require('passport');
const passportLocalMangoose = require("passport-local-mongoose");

app.use(session({secret: process.env.SECRET, resave: false, saveUninitialized: false}));
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));

mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);

mongoose.connect("mongodb://localhost:27017/usersDB");

const userSchema = new mongoose.Schema({fullName: String, email: String, password: String, messages: [String]});

userSchema.plugin(passportLocalMangoose);

const User = new mongoose.model("User", userSchema);

passport.use(User.createStrategy());

passport.serializeUser(function(User, done) {
  done(null, User.id);
});

passport.deserializeUser(function(id, done) {
  User.findById(id, function(err, user) {
    done(err, user);
  });
});

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + "/public"));

const server = app.listen(3000, function(err) {
  if (!err) {
    console.log("Server is running on port 3000");
  } else {
    console.log(err);
  }
});

const io = socket(server);

Answer 1

感谢@Barmar，以及其他在评论中帮助我的人。

发生此问题是因为每当您在父元素中创建子元素时，都会重新创建该父元素中的所有元素，并且未设置该父元素中的所有事件侦听器。

请参阅评论以获取更多详细信息。