每次我单击提交时，jQuery 都会不断发布一条额外的消息答案

【问题标题】：jQuery keeps posting an extra message each time I click submit每次我单击提交时，jQuery 都会不断发布一条额外的消息
【发布时间】：2013-07-23 21:25:07
【问题描述】：

我的 jQuery 代码表现得很奇怪。每次我单击提交时，它都会不断发布同一消息的额外副本。例如：

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/>");
        });
    });
});

【问题讨论】：

是不是因为您在点击事件中执行socket.on('new message', ，因此多次绑定到它，导致每次连续点击将其点击次数添加到聊天区域？我不熟悉socket.on
几乎可以肯定。
Don't repeat yourself: jsfiddle.net/ZQAf5

标签： javascript jquery socket.io

【解决方案1】：

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

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

解决办法是把它移到点击事件之外。

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/>");
    });   
});

【讨论】：