1

ajaxリクエストを送信するクリックjqueryがあります。

フォームはありません。

ajaxリクエストの送信にもキーボードENTERを使用したいと思います。

これらのボタンを割り当てましたが、単純にできないので混乱します。

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

ここにサンプルをアップロードしました。

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 に答える