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，以及其他在評論中幫助我的人。

發生此問題是因為每當您在父元素中創建子元素時，都會重新創建該父元素中的所有元素，並且未設置該父元素中的所有事件偵聽器。

請參閱評論以獲取更多詳細信息。