不能在節點JS教程提交表單

我這樣做 http://socket.io/get-started/chat/不能在節點JS教程提交表單

我對部分發射事件

當我鍵入文本框中鍵入消息並點擊發送它刷新頁面，帶我到url localhost：3000 /？而不是在服務器上記錄消息。

爲什麼按鈕未能觸發$（ '形式'）。提交（函數（）{行？

如果我打開鉻的JS控制檯，然後輸入

socket.emit("chat message", 'testing from console')

它記錄在我的命令行服務器窗口中的消息如預期的那樣，所以我認爲在服務器端代碼中沒有錯誤

我有手輸入了所有內容，但是當它不工作時，複製粘貼以確保我有它正確。

所以index.html的對我來說是

<!doctype html> 
<html> 
    <head> 
    <title>Socket.IO chat</title> 
    <style> 
     * { margin: 0; padding: 0; box-sizing: border-box; } 
     body { font: 13px Helvetica, Arial; } 
     form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } 
     form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 
     form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 
     #messages { list-style-type: none; margin: 0; padding: 0; } 
     #messages li { padding: 5px 10px; } 
     #messages li:nth-child(odd) { background: #eee; } 
    </style> 
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
    <script> 
     var socket = io(); 
     $('form').submit(function(){ 
     socket.emit('chat message', $('#m').val()); 
     $('#m').val(''); 
     return false; 
     }); 
    </script> 
    </head> 
    <body> 
    <ul id="messages"></ul> 
    <form action=""> 
     <input id="m" autocomplete="off" /><button>Send</button> 
    </form> 
    </body> 
</html>

和index.js是

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http) 

app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 
}); 

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

http.listen(3000, function(){ 
    console.log('listneing on *:3000') 
});

使用的Chrome版本47.0.2526.80（64位）

來源

2015-12-20 humanbeing

嘗試將腳本塊移動到標記之前。當你的當前腳本運行時，表單已經被渲染。 – Will

還要添加'event.preventDefault（）' – Rayon

@我會看到我誤讀了教程，並將其放在標記之前。謝謝！ – humanbeing

嘗試在文檔中包裝代碼準備好的塊。表單可能尚不存在。

$(function(){ 
    $('form').submit(function(){ 
      socket.emit('chat message', $('#m').val()); 
      $('#m').val(''); 
      return false; 
     }); 
});

來源

2015-12-20 02:18:21

不能在節點JS教程提交表單

回答

相關問題