可通过单击或按回车键工作的按钮答案

【问题标题】：button that works with either click or pressing enter可通过单击或按回车键工作的按钮
【发布时间】：2014-01-18 03:02:56
【问题描述】：

我只能通过创建 2 个单独的事件来让按钮工作：

 $('#loginSubmit').click (function ()
 {
            var userName = $('#userName').val();
            var password = $('#password').val();
                            event.preventDefault();
                            $.ajax({
                                            type: "POST",
                                            url: "auth.php",
                                             data:"userName="+userName+"&password="+password,
                                            success: function(result)
                                            {
                                                    //$('#mainBody').html(result);
                                                    window.location.replace('chooseGroup.php');
                                            }
                                    })
 });


 $('input').keypress(function(event)
 {
   if (event.which == 13) {

            var userName = $('#userName').val();
            var password = $('#password').val();
                            event.preventDefault();
                            $.ajax({
                                            type: "POST",
                                            url: "auth.php",
                                            data: "userName="+userName+"&password="+password,
                                            success: function(result)
                                            {
                                                    //$('#mainBody').html(result);
                                                    window.location.replace('chooseGroup.php');
                                            }
                                    })
                    }
    })
    });

html:

 <div class='Lrow'><input type='button' id='loginSubmit' value='Login'></div>

我知道可能有更好的方法。我很想听。无论如何，如果我使用 mozilla 浏览器，在按键功能中“事件”是未定义的。这在 chrome 中运行良好。有什么想法吗？

【问题讨论】：

type="submit" 而不是 type="button" ?
这真的是一种形式吗？为什么不处理表单的submit 事件而不是按钮的click？
@Krishna 会提交帮助来调用 ajax 调用吗？
这很奇怪，我一直认为按 Enter 会触发点击事件，而小提琴表明它确实如此 -> jsfiddle.net/cpr27
@MillerKoijam - 你必须先防止默认并编写提交处理程序。

标签： javascript jquery

【解决方案1】：

将通用代码放入函数中。

var mySubmitFunction (event) {
    //the code
}

$('#loginSubmit').on("click", mySubmitFunction );
$('input').keypress(function(event){
    if (event.which == 13) {
        mySubmitFunction(event);
    }
});

但是有一种更好的方法，无需听点击/输入键。更好的方法是让表单做它想做的事。

当您正确书写时，表单将在输入时提交。您只需添加一个提交按钮和一个 onsubmit 事件。您在那里取消提交并进行 Ajax 调用。将按钮类型设置为提交，它应该可以工作。奖励是如果 JS 被禁用，表单仍会提交到服务器。

$("#YourForm").on("submit", function(event){  /* code here */ });

【讨论】：

似乎比我拥有的更整洁，我将使用它。谢谢。但是，这如何处理 press enter 事件？
你去。处理按钮而不是表单本身几乎总是错误的方法。
不，我做到了！我的“你去”是为了响应您更新以处理提交。它伴随着我的投票。显然我今天的沟通能力很差！
我喝了太多咖啡，新机器，不得不尝试所有新选项。所以也许我应该读。大声笑
如果它是一个表单，使用提交事件是正确的方法，但它仍然不能解释为什么需要两个事件处理程序，点击处理程序应该可以用 enter 键触发.

【解决方案2】：

将您的代码放入一个函数中，例如：ajaxSubmit() 然后使用 jquery on 调用您的函数

function ajaxSubmit(){
    var userName = $('#userName').val();
    var password = $('#password').val();
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "auth.php",
        data: "userName="+userName+"&password="+password,
        success: function(result){
            //$('#mainBody').html(result);
            window.location.replace('chooseGroup.php');
        }
    });
}

$('#loginSubmit').on("click", ajaxSubmit );

$('#loginSubmit').on("click", function(event){
    if (event.which == 13) {
        ajaxSubmit(event);
    }
});

【讨论】：

【解决方案3】：

On 方法将一个或多个参数作为事件名称，如下所示：

$('#loginSubmit').on("click keypress", function(event){

  if (event.type == "keypress" ) {
     if(event.which == 13)
     {
        put your code here or call function
     }
  }
 else//click event
  {
        put your code here or call function
  }

});

【讨论】：