点击'enter/return'时运行jQuery AJAX

Question

我有一个简单的表单供用户在"墙上"发布.正如您所看到的,它有一个文本输入字段和一个由CSS设置的多个跨度组成的提交按钮.

<form action="http://example.com/2/chat_share" method="post" id="chat_form">                    
<input type="text" name="chat_msg" value="" />                  
</form>

<span class="share_js fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
    <span class="fc-button-inner">
        <span class="fc-button-content save_button">Share</span>
        <span class="fc-button-effect">
            <span></span>
        </span>
    </span>
</span>

当用户点击"共享"按钮时,这很有效,该按钮运行下面的AJAX:

$(document).ready(function() {

    $('.share_js').click(function(event){
        event.preventDefault();

        var link = $('#chat_form').attr('action');

        $.ajax({
            url: link,
            type: "POST",
            data: $('#chat_form').serialize(),
            dataType: "html",
            beforeSend: function(){
                  $('#loading').show();
                },          
            success: function() {
                $('#chat_thread').load(2 + '/chat_ajax');
                $('#loading').hide();
                $('#chat_form input').val('');
            }
        });
    });

});

我的问题是当我在键盘上点击'return'或'enter'时,表单是通过非AJAX方法提交的.

我想用这个键击来捕获

$('#selector').keydown(function (e){
    if(e.keyCode == 13){
        //code
    }
})

但是无法将其包裹在我的AJAX功能中.

理想情况下,点击共享和点击返回都应该提交表单.

任何人都有建议如何做到这一点？

谢谢你的帮助!

Answer 1

为什么不使用表格帖子？

<form action="http://example.com/2/chat_share" method="post" id="chat_form">                    
<input type="text" name="chat_msg" value="" />                  

<span class="share_js fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
    <span class="fc-button-inner">
        <span class="fc-button-content save_button">Share</span>
        <span class="fc-button-effect">
            <span></span>
        </span>
    </span>
</span>
</form>

然后挂钩表单POST

$('#chat_form').bind('submit', function(event) {

    var link = $(this).attr('action');

    $.ajax({
        url: link,
        type: "POST",
        data: $(this).serialize(),
        dataType: "html",
        beforeSend: function(){
              $('#loading').show();
            },          
        success: function() {
            $('#chat_thread').load(2 + '/chat_ajax');
            $('#loading').hide();
            $('#chat_form input').val('');
        }
    });

    return false; // dont post it automatically
});

来自评论

$('.save_button').bind('click', function(event) {
    getStuff();
    return false; // dont move to top
});
$('#chat_form').bind('submit', function(event) {
    getStuff();
    return false; // dont post it automatically
});

function getStuff() {

    var link = $('#chat_form').attr('action');

    $.ajax({
        url: link,
        type: "POST",
        data: $('#chat_form').serialize(),
        dataType: "html",
        beforeSend: function(){
              $('#loading').show();
            },          
        success: function() {
            $('#chat_thread').load(2 + '/chat_ajax');
            $('#loading').hide();
            $('#chat_form input').val('');
        }
    });

}