Question

我有一个用来发表评论的基本表格。看起来像这样：

<form method="post" action="">
  <div class="input-group">
    <input type="text" class="form-control" id="chat-input" placeholder="Message...">
    <span class="input-group-btn">
      <button id="chat-enter" class="btn btn-default go-chat" type="button">Go!</button>
    </span>
  </div><!-- /input-group -->
</form>

我使用jquery和ajax处理数据。我希望能够通过点击Go!按钮以及点击Enter键发布评论。由于某种原因，下面的代码不起作用。它仅在单击按钮时有效。

//Save comments
function saveComment(id, comment) {
    $.ajax({type: "POST",
        url: "ajax/chat.php",
        data: { item_id: id, comment: comment },
            success:function(result)
            {
             alert("done");
            }

    });
}

$(".go-chat").click(function() {
    var comment = $("#chat-input").val();
    var id = getParameterByName('id');

    saveComment(id, comment);

});

$('body').on('keypress','#chat-enter', function(e){
    if (e.keyCode == 13)
    {
        var comment = $("#chat-input").val();
        var id = getParameterByName('id');
        saveComment(id, comment);
    }
});

**编辑**

$("#comment-form").submit(function(e) {
    var comment = $("#chat-input").val();
    var id = getParameterByName('id');

    saveComment(id, comment);

    e.preventDefault();

});

Answer 1

当输入被按下时，您可以通过在Go!按钮上触发点击事件轻松完成。

$('body').onkeypress( function(e) {
 if (e.keyCode == 13) {
    $('#chat-enter').click();
 }
}

通过这种方式，所有内容都将由与Go!按钮关联的点击事件处理程序处理。

您可以使用 onkeyup 而不是 onkeypress 。您可以将其与输入字段相关联，而不是 body 标记。

Answer 2

使用提交按钮和表单提交事件处理程序（它将处理表单中的输入键按下）

<form method="post" action="">
  <div class="input-group">
      <input type="text" class="form-control" id="chat-input" placeholder="Message..."/>
    <span class="input-group-btn">
      <button id="chat-enter" class="btn btn-default go-chat" type="submit">Go!</button>
    </span>
  </div><!-- /input-group -->
</form>

然后

//Save comments
function saveComment(id, comment) {
    $.ajax({
        type: "POST",
        url: "ajax/chat.php",
        data: {
            item_id: id,
            comment: comment
        },
        success: function (result) {
            alert("done");
        }

    });
}

$("form").submit(function (e) {
    var comment = $("#chat-input").val();
    var id = getParameterByName('id');

    saveComment(id, comment);
    //prevent default form submit
    e.preventDefault()
});

jQuery - 使用click和Enter键发布

2 个答案: