jQuery keeps posting an extra message each time I click submit

问题

My jQuery code is acting really weird. It keeps posting an extra copy of the same message each time I click on submit. For example:

Hello 3
Hello 3
Hello 3
Hello 2
Hello 2
Hello

Anyone have an idea why this is happening? Here is my code so far:

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

回答1:

This function here registers an event handler every time it's called. Because you're calling it in the click event, every time you click, you register a new event handler. These are managed in a queue, and thus, it will run through the event handler an extra time with each button click.

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

The solution is to move it outside of the click event.

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

来源：https://stackoverflow.com/questions/17821368/jquery-keeps-posting-an-extra-message-each-time-i-click-submit

标签

javascript

jquery

Socket.IO