1

I have on click jquery that submits ajax request.

There are no forms.

I'd like keyboard ENTER to be used also to submit ajax request.

I've allot of these buttons, this confuses me as I cannot simply do:

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

My currect on click event looks like this (how do I extend this to accomodate 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;
});

I uploaded sample here: http://gamoicani.es/logo/ click on any logo, I'd like to use keyboard ENTER also to submit.

4

2 回答 2

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()
    }
  });
});
于 2013-04-17T13:39:18.683 回答
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

于 2013-04-17T13:29:25.580 回答