每次点击提交时，jQuery都会不断发布额外的消息

我的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', '' + $messageTitle.val() + '' + ' - ' + $messageBox.val()); $messageTitle.val(''); $messageBox.val(''); } socket.on('new message', function (data) { $chat.prepend(data + "
"); }); }); }); 

Answer 1

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

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

解决方案是将其移出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', '' + $messageTitle.val() + '' + ' - ' + $messageBox.val()); $messageTitle.val(''); $messageBox.val(''); } }); socket.on('new message', function (data) { $chat.prepend(data + "
"); }); });