点击'时运行jQuery AJAX；输入/返回'；

我有一个简单的表单供用户在“墙上”张贴。正如您所见，它有一个文本输入字段和一个提交按钮，该按钮由多个跨距组成，通过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>

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

我想用

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

但是我还没能把这一点概括到我的AJAX函数中

理想情况下，点击共享和点击返回都应提交表单。

有人建议怎么做吗

---

谢谢你的帮助

您可以捕获表单提交事件：

$('#chat_form').submit(function(){
    //do stuff
    return false;//prevent default submission.
});

---

将

单击
事件更改为表单
提交
事件：

$(document).ready(function() {

$('#chat_form').submit(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('');
        }
    });
});

});

对于
向下键
，您可以执行以下操作：

$('#selector').keydown(function (e){
    if(e.keyCode == 13){
e.preventDefault();
$('#chat_form').trigger('submit');
        //code
    }
})

为什么不使用表单post

<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>


根据评论

$('.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('');
        }
    });

}

解决方法是针对每种情况使用两种不同的方法：一种用于单击
Share
，另一种用于点击回车键

这段代码对我适用，但是如果您认为这代表了不必要的膨胀或线条，请让我知道——否则我稍后会将其标记为最终答案

谢谢大家的帮助

$(document).ready(function() {


//this  will run AJAX when clicking on 'Share'


    $('.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(<?php echo $id; ?> + '/chat_ajax');
                $('#loading').hide();
                $('#chat_form input').val('');
            }
        });
    });

//this  will run AJAX when hitting return / enter

    $('#chat_form input').keydown(function (e){
        if(e.keyCode == 13){
    e.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(<?php echo $id; ?> + '/chat_ajax');
                    $('#loading').hide();
                    $('#chat_form input').val('');
                }
            });
        }
    });

});

$（文档）.ready（函数（）{
//这将在单击“共享”时运行AJAX
$（'.share_js'）。单击（函数（事件）{
event.preventDefault（）；
var link=$（'#chat_form'）.attr（'action'）；
$.ajax({
网址：link，
类型：“POST”，
数据：$（'#聊天室表格'）。序列化（），
数据类型：“html”，
beforeSend:function（）{
$（“#加载”）.show（）；
},          
成功：函数（）{
$（'chat_thread'）。加载（+'/chat_ajax'）；
$（“#加载”）.hide（）；
$（'chat#u form input'）.val（''；
}
});
});
//当点击return/enter时，将运行AJAX
$（'chat#u form input'）.keydown（函数（e）{
如果（e.keyCode==13）{
e、 预防默认值（）；
var link=$（'#chat_form'）.attr（'action'）；
$.ajax({
网址：link，
类型：“POST”，
数据：$（'#聊天室表格'）。序列化（），
数据类型：“html”，
beforeSend:function（）{
$（“#加载”）.show（）；
},          
成功：函数（）{
$（'chat_thread'）。加载（+'/chat_ajax'）；
$（“#加载”）.hide（）；
$（'chat#u form input'）.val（''；
}
});
}
});
});
thx@balexandre但这会导致两个问题-[1]我的shar按钮被禁用，[2]当我点击enter时，它仍然是非AJAX路径。您肯定在某个地方出现javascript错误，阻止提交
与method@balexandre-是否有办法保存点击共享以供提交？由于这不是一个
，因此通过删除
单击
功能，它将处于非活动状态供您解释。与@balexandre的示例类似，尽管我没有发现错误，但这不允许单击共享并按enter键
$('.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('');
        }
    });

}

$(document).ready(function() {


//this  will run AJAX when clicking on 'Share'


    $('.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(<?php echo $id; ?> + '/chat_ajax');
                $('#loading').hide();
                $('#chat_form input').val('');
            }
        });
    });

//this  will run AJAX when hitting return / enter

    $('#chat_form input').keydown(function (e){
        if(e.keyCode == 13){
    e.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(<?php echo $id; ?> + '/chat_ajax');
                    $('#loading').hide();
                    $('#chat_form input').val('');
                }
            });
        }
    });

});