在键盘上提交ajax请求

时间:2013-04-17 12:59:40

标签: javascript jquery ajax

我点击提交ajax请求的jquery。

没有表格。

我希望键盘ENTER也用于提交ajax请求。

我已经分配了这些按钮,这让我感到困惑,因为我无法做到:

$('#myForm input:text').keypress(function (e) {
  if (e.which == 13) {
    $("#button1").click()
  }
});

我在点击事件上的当前情况如下(如何将其扩展为容纳ENTER?)

//Check answer
$("body").on("click", ".unlocked figcaption .check", function(){
    var logo_id = $(this).parent().attr("id");
    var answer = $("#" + logo_id + " input[name=guesslogo]");
    var logo_lang = answer.attr("data-lang");

    answer.removeAttr("class").attr("disabled","true");

        //Submit answer for review
        $.ajax({
            url: "actions.php",
            get: "GET",
            data: "answer=" + answer.val() + "&logo_id=" + logo_id + "&logo_lang=" + logo_lang,
            cache: false,
            success: function (data){
                var response = jQuery.parseJSON(data);
                if (response.result == 1) {
                    answer.addClass("correct").siblings(".clear, .hint").fadeTo("slow","0.4");
                    answer.parent().append('<div class="alert"><h3>Correct!</h3> <p>Score: '+ response.score +'</p></div>');
                    $("#" + logo_id).siblings(".logo").removeClass("logo").addClass("answered").removeAttr("style");
                    snd_correct.play();
                        //update user_score and user_level values in leaderboard and header widgets
                        var this_user = $("header aside").attr("data-usern");
                        if (this_user) {
                            var this_user_score = $("header aside .user_score").text();
                            var this_user_level = $("header aside .user_level").text();
                                $("[data-usern="+ this_user +"] .user_score").empty().append(parseInt(this_user_score) + parseInt(response.score));
                                if (response.level_up == 1) {
                                    var new_level = parseInt(this_user_level) +1;
                                    $("[data-usern="+ this_user +"] .user_level").empty().append(new_level);
                                    update_view(new_level);
                                }
                            //
                            update_level_progress_bar();
                        }
                } else if (response.result == 0) {
                    answer.addClass("wrong").removeAttr("disabled");
                    snd_wrong.play();
                } else if (response.result == 2) {
                    answer.addClass("almost").removeAttr("disabled");
                    snd_wrong.play();
                }
            }
        });

    return false;
});

我在此处上传了示例:http://gamoicani.es/logo/点击任何徽标,我也想使用键盘ENTER提交。

2 个答案:

答案 0 :(得分:3)

//试试这个!! :)

$(document).ready(function(){
  $(this).on('keypress click','.unlocked figcaption .check',function(e){
    if((e.type === 'keypress' && e.keyCode === 13) || e.type === 'click')
    {
       // All your code inside the .on()
    }
  });
});

答案 1 :(得分:2)

您可以将ajax功能设置为外部,然后在点击和按键(输入)事件中调用它,如下所示:

$(document).on("click", ".unlocked figcaption .check", ajaxFunction);
$(document).on("keypress", "#myForm input:text", function (e) {
  if (e.keyCode == 13){
      e.preventDefault();
      ajaxFunction();
  }
});

function ajaxFunction(){
    var logo_id = $(this).parent().attr("id");
    var answer = $("#" + logo_id + " input[name=guesslogo]");
    var logo_lang = answer.attr("data-lang");

    answer.removeAttr("class").attr("disabled","true");

        //Submit answer for review
        $.ajax({
            url: "actions.php",
            get: "GET",
            data: "answer=" + answer.val() + "&logo_id=" + logo_id + "&logo_lang=" + logo_lang,
            cache: false,
            success: function (data){
                var response = jQuery.parseJSON(data);
                if (response.result == 1) {
                    answer.addClass("correct").siblings(".clear, .hint").fadeTo("slow","0.4");
                    answer.parent().append('<div class="alert"><h3>Correct!</h3> <p>Score: '+ response.score +'</p></div>');
                    $("#" + logo_id).siblings(".logo").removeClass("logo").addClass("answered").removeAttr("style");
                    snd_correct.play();
                        //update user_score and user_level values in leaderboard and header widgets
                        var this_user = $("header aside").attr("data-usern");
                        if (this_user) {
                            var this_user_score = $("header aside .user_score").text();
                            var this_user_level = $("header aside .user_level").text();
                                $("[data-usern="+ this_user +"] .user_score").empty().append(parseInt(this_user_score) + parseInt(response.score));
                                if (response.level_up == 1) {
                                    var new_level = parseInt(this_user_level) +1;
                                    $("[data-usern="+ this_user +"] .user_level").empty().append(new_level);
                                    update_view(new_level);
                                }
                            //
                            update_level_progress_bar();
                        }
                } else if (response.result == 0) {
                    answer.addClass("wrong").removeAttr("disabled");
                    snd_wrong.play();
                } else if (response.result == 2) {
                    answer.addClass("almost").removeAttr("disabled");
                    snd_wrong.play();
                }
            }
        });

    return false;
};

jsfiddle