Javascript 为什么在动态更新jquery触发器后socket.emit会重复？_Javascript_Jquery_Html_Node.js_Socket.io

Javascript 为什么在动态更新jquery触发器后socket.emit会重复？

javascript jquery html node.js socket.io

Javascript 为什么在动态更新jquery触发器后socket.emit会重复？,javascript,jquery,html,node.js,socket.io,Javascript,Jquery,Html,Node.js,Socket.io,我正在尝试更新（或更改）客户端代码中显示的div（“display holder”）的内容，该div包含调用使用socket.emit的div外部函数的html和jQuery，但一旦我替换了该div内容，该函数就会多次激发socket.emit，我也会使用off（）和unbind（）功能，但它们似乎不起作用。是否有任何方法可以动态替换div（显示器支架）内容并使socket.emit仅触发一次客户端 <!DOCTYPE html> <html> <head>

我正在尝试更新（或更改）客户端代码中显示的div（“display holder”）的内容，该div包含调用使用socket.emit的div外部函数的html和jQuery，但一旦我替换了该div内容，该函数就会多次激发socket.emit，我也会使用off（）和unbind（）功能，但它们似乎不起作用。是否有任何方法可以动态替换div（显示器支架）内容并使socket.emit仅触发一次

客户端

<!DOCTYPE html>
<html>
<head>
    <title>Help!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
    //Globals
    var displayCounter = 1;

    //Socket.io client side

      var socket = io('http://localhost');


      socket.on('news', function (data) {
        console.log(data);
        $('#message-displayer').append("<b> Server says: </b>"+data.msg+"<br>");

      });
      socket.on('client-answer', function (data) {
        console.log(data);
        $('#message-displayer').append("<b> Server says: </b>"+data.msg+"<br>");
        socket.emit('message', { msg: 'my data from client' });
      });

      //emitter function
      function sendData(data){
        socket.emit("client-message", { msg:data });
      }
    </script>

    <style> 

        #display-holder{
          position: absolute;
          margin: auto;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: 500px;
          height: 300px;
          background-color: #ccc;
          border-radius: 3px;
          text-align:center
        }
        .display-holder-nodes{
         display: inline-block;
         border: 1px solid black;
         width: 95%;
        }
        button, input{ 
         width: auto;
         height: auto; 
         padding: 10px; 
         margin-top: 16px;
        }
        #message-displayer{ height:70%; overflow-y: scroll;}
        #control-panel{ height:25%; text-align:center;}

    </style>

</head>
<body>
    <div id="display-holder">
        <div id="message-displayer" class="display-holder-nodes"></div>
        <div id="control-panel" class="display-holder-nodes">
            <input type="text" id="clientInput">
            <button id="sendMessage">Send message</button>
            <button id="changeDisplay">Change display</button> 
        </div>
        <script>
        //jQuery handlers (will be replace when clicking "#changeDisplay" btn)

            $(document).on('click', '#sendMessage', function(){
                 $('#message-displayer').append("<b> You said: </b>"+$('#clientInput').val()+"<br>");
                sendData($("#clientInput").val());
                 $('#clientInput').val('');
            });

        </script>
    </div>


<script>
    //jQuery handlers 

    $(document).on('click', '#changeDisplay', function(){
        displayCounter++;
        //html and jquery to be inserted dynamically
        $("#display-holder").empty().off().unbind().html('  <div id="display-holder">'+
        '<div id="message-displayer" class="display-holder-nodes"><h3>Dislplay #'+displayCounter+'</h3></div>'+
        '<div id="control-panel" class="display-holder-nodes">'+
            '<input type="text" id="clientInput">'+
            '<button id="sendMessage">Send message</button>'+
            '<button id="changeDisplay">Change display</button> '+
        '</div>'+
        '<script>'+
            '$(document).on("click", "#sendMessage", function(){'+
                ' $("#message-displayer").append("<b> You said: </b>"+$("#clientInput").val()+"<br>");'+
                 'sendData($("#clientInput").val());'+
                ' $("#clientInput").val("");'+
            '});'+
        '</sc'+'ript>'+
    '</div>');
    });



</script>

</body>
</html>

您正在将事件附加到

文档

并删除附加到

显示架

的事件

正如政府所说

.on（）方法将事件处理程序附加到当前选定的集合 jQuery对象中元素的数量

将

.on（）

更改为

$（“#显示支架”）。on（'click'

将事件附加到

文档

并删除附加到

显示支架

的事件

正如政府所说

.on（）方法将事件处理程序附加到当前选定的集合 jQuery对象中元素的数量

将

.on（）

更改为

$（“#显示器支架”）。在（'click'

上，您不应该在

$（“#显示器支架”）内有显示器支架标签。html
，您将显示器支架放在显示器支架内。您不应该在显示器支架内有显示器支架标签（“#显示器支架”）.html，您正在将显示器支架放在显示器支架内
var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');

app.listen(80, function(){
    console.log('App listening on port 80');
});

function handler (req, res) {

  fs.readFile(__dirname + '/public/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}



io.on('connection', function (socket) {

  socket.emit('news', { msg: 'hello client' });


  socket.on('message', function (data) {
    console.log('Client says: ', data);

  });

  socket.on('client-message', function (data) {
    console.log('Client says: ', data);
    socket.emit('client-answer', { msg: 'You sent me: '+data.msg });
  });

});