Javascript 每次我单击submit时，jQuery都会发布一条额外的消息

我的jQuery代码表现得非常奇怪。每次我点击submit时，它都会发布同一条消息的额外副本。例如：

Hello 3
Hello 3
Hello 3
Hello 2
Hello 2
Hello 

有人知道为什么会这样吗？以下是我目前的代码：

jQuery(function ($) {
    var socket = io.connect();
    var $messageForm = $('#sendmessage');
    var $messageTitle = $('#title');
    var $messageBox = $('#message');
    var $chat = $('#chat');

    $messageForm.click(function (e) {
        if ($.trim($("#title").val()).length === 0) {
            alert('You must provide valid input');
            $messageTitle.val('');
            $messageBox.val('');
            return false;
        }
        if ($.trim($("#message").val()).length === 0) {
            alert('You must provide valid input');
            $messageTitle.val('');
            $messageBox.val('');
            return false;
        } else {
            e.preventDefault();
            socket.emit('send message', '<b>' + $messageTitle.val() + '</b>' + '&nbsp;-&nbsp;' + $messageBox.val());
            $messageTitle.val('');
            $messageBox.val('');
        }

        socket.on('new message', function (data) {
            $chat.prepend(data + "<br/>");
        });
    });
});

jQuery（函数（$）{
var socket=io.connect（）；
var$messageForm=$（“#sendmessage”）；
var$messageTitle=$（“#title”）；
var$messageBox=$（“#message”）；
var$chat=$（“#chat”）；
$messageForm.单击（函数（e）{
if（$.trim（$（“#title”）.val（））.length==0）{
警报（“您必须提供有效的输入”）；
$messageTitle.val（“”）；
$messageBox.val（“”）；
返回false；
}
if（$.trim（$（“#message”）.val（））.length==0）{
警报（“您必须提供有效的输入”）；
$messageTitle.val（“”）；
$messageBox.val（“”）；
返回false；
}否则{
e、 预防默认值（）；
emit（'send message'，'+$messageTitle.val（）++'+'-'+$messageBox.val（））；
$messageTitle.val（“”）；
$messageBox.val（“”）；
}
socket.on（'new message'，函数（数据）{
$chat.prepend（数据+“
”）；
});
});
});

此函数在每次调用时都会注册事件处理程序。因为您在click事件中调用它，所以每次单击时，都会注册一个新的事件处理程序。这些是在队列中管理的，因此，每次单击按钮都会额外运行事件处理程序一段时间

socket.on('new message', function (data) {
            $chat.prepend(data + "<br/>");
        });

socket.on（'newmessage'，函数（数据）{
$chat.prepend（数据+“
”）；
});

解决方案是将其移到click事件之外

jQuery(function ($) {
    var socket = io.connect();
    var $messageForm = $('#sendmessage');
    var $messageTitle = $('#title');
    var $messageBox = $('#message');
    var $chat = $('#chat');

    $messageForm.click(function (e) {
        if ($.trim($("#title").val()).length === 0) {
            alert('You must provide valid input');
            $messageTitle.val('');
            $messageBox.val('');
            return false;
        }
        if ($.trim($("#message").val()).length === 0) {
            alert('You must provide valid input');
            $messageTitle.val('');
            $messageBox.val('');
            return false;
        } else {
            e.preventDefault();
            socket.emit('send message', '<b>' + $messageTitle.val() + '</b>' + '&nbsp;-&nbsp;' + $messageBox.val());
            $messageTitle.val('');
            $messageBox.val('');
        }
    });
    socket.on('new message', function (data) {
        $chat.prepend(data + "<br/>");
    });   
});

jQuery（函数（$）{
var socket=io.connect（）；
var$messageForm=$（“#sendmessage”）；
var$messageTitle=$（“#title”）；
var$messageBox=$（“#message”）；
var$chat=$（“#chat”）；
$messageForm.单击（函数（e）{
if（$.trim（$（“#title”）.val（））.length==0）{
警报（“您必须提供有效的输入”）；
$messageTitle.val（“”）；
$messageBox.val（“”）；
返回false；
}
if（$.trim（$（“#message”）.val（））.length==0）{
警报（“您必须提供有效的输入”）；
$messageTitle.val（“”）；
$messageBox.val（“”）；
返回false；
}否则{
e、 预防默认值（）；
emit（'send message'，'+$messageTitle.val（）++'+'-'+$messageBox.val（））；
$messageTitle.val（“”）；
$messageBox.val（“”）；
}
});
socket.on（'new message'，函数（数据）{
$chat.prepend（数据+“
”）；
});   
});

是不是因为您在点击事件中执行了

socket.on（'new message'），

，从而多次绑定到它，导致每次连续点击都会将它的点击次数添加到聊天区？我不熟悉

socket.on

这几乎可以肯定：