使用JQuery和Ajax提交表单

Question

我正在进行类似于论坛的讨论。 可能会有几篇文章，用户应该发表评论。

我有这个html帖子评论表，该帖子在每个帖子后都会重复

 <form method="POST" action="/discussion/post-comment" id="post-comment-form" class="form-horizontal subcommentcofrm" role="form">
   <div class = "form-group">
        <div class = "col-sm-6">
            <input type = "text" class = "form-control comment-yako" id = "comment-field" placeholder = "Type your comment here..." autocomplete="off">

        </div>
   </div>
</form>

这是我的带有ajax提交的JQuery代码：

    $("input.comment-yako").live('keypress', function(e) {
        if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
            console.log('heey');
             $(this).closest('form').submit(function(e){
                console.log('heeeeeeey');
                var data = $(this).serializeArray();
                var url = $(this).attr("action");
                $.ajax({
                    url: url,
                    type: 'POST',
                    cache: false,
                    data: data,
                    success: function(data) {
                        var item = $(data).hide().fadeIn(800);

                        $('.disc-content-reply').append(item);

                    },
                    error: function(e) {
                        alert(e);
                    }
                });
                e.preventDefault();
            });

            $(this).closest(".comment-yako").val("");
            return false;
        } else {
            return true;
        }
    });

当用户按下Enter键时，应该进行提交。 我的问题是，当我按Enter键时，表单未提交。 我不知道问题出在哪里； 我究竟做错了什么？

任何帮助都感激不尽。

谢谢

Answer 1

您应该在keypress处理程序本身中而不是在按键发生后绑定的submit处理程序中发送AJAX请求。 在大多数情况下，将一个事件处理程序绑定到另一个事件处理程序中是错误的。 如果您发现自己正在这样做，请认真考虑是否确实要这样做。

除了更改之外，我.on() .live()调用转换为.on() 。 我也从.serializeArray()更改为.serialize() ，因为这是发送表单字段的常规方法。

$(document).on('keypress', 'input.comment-yako', function(e) {
    if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
        console.log('heey');
        var form = $(this).closest('form');
        var data = form.serialize();
        var url = form.attr("action");
        $.ajax({
            url: url,
            type: 'POST',
            cache: false,
            data: data,
            success: function(data) {
                var item = $(data).hide().fadeIn(800);
                $('.disc-content-reply').append(item);
            },
            error: function(e) {
                alert(e);
            }
        });
        e.preventDefault();
        $(this).val("");
        return false;
    } else {
        return true;
    }
});