Question

我尝试记录在控制台的输入框中输入的消息。我按照以下示例

我面临的问题是，当我输入信息并点击发送时，尽管使用＆＃39;返回false＆＃39;该页面会自动刷新。在脚本中。 console.log也没有显示输入的消息＆＃39;这让我相信脚本没有被调用

   <script type="text/javascript">
    var socket = io();
    $('#chat-form').on('submit',function(){
      console.log('message entered');
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    </script>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id='chat-form'>
      <input id="m" autocomplete="off" /><button type='submit'>Send</button>
    </form>

index.js

io.on('connection',function(socket){
  console.log('a user connected');

  socket.on('disconnect',function(){
    console.log('user disconnected');
  });

  socket.on('chat message',function(msg){
    console.log('message: '+msg)
  });

});

我甚至尝试过event.preventDefault（）。但页面仍然会在表单提交时刷新。

谢谢， KJ

Answer 1

使用F12工具/ Firebug进行检查，无论javascript是否完全运行。

Answer 2

在您的脚本运行时，#chat-form尚未出现在DOM中（因为HTML 跟随脚本）。

在<script>之前移动</body>或者在检索DOM元素之前等待ready事件：

var socket = io();
$(function() {
  $('#chat-form').on('submit',function(){
    console.log('message entered');
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
});

socket.io聊天示例 - 表单提交有问题

2 个答案: