1

キーボードの矢印キーを使用して前/次の写真に移動する次の簡単な機能を備えた写真ギャラリーがあります。

$(function() {
    var navEnabled = true;

    $(document).keyup(function(e) {
        if (navEnabled) {
            switch(e.keyCode) {
                case 37 : window.location = $('.prev').attr('href'); break;
                case 39 : window.location = $('.next').attr('href'); break;
            }
        }
    });

    $('#comment_area').bind('focus', function (event) {
        navEnabled = false;
    }).bind('blur', function (event) {
        navEnabled = true;
    });
});

各写真の下に、写真にコメントを残すための id #comment_areaを持つ html textarea 要素(! ページの読み込み中に AJAX を介して読み込まれます!)があり、入力中にキーボードの写真ナビゲーションを無効にするソリューションを探しています。もう一度電源を入れます。上記のコードは機能していないようです。テキストエリア要素が AJAX 経由で読み込まれたためだと思います。.bind 関数コードを AJAX リクエストに移動しようとしたため、#comment_area id は認識されますが、navEnabled 変数は不明です。

4

2 に答える 2

1

イベント委任を使用します。

Ajax コンテンツをロードしているコンテナー要素が と呼ばれていると仮定しましょう#ajax_container。次に、次を使用できます。

$('#ajax_container').on( 'focus', '#comment_area', function (event) {
    navEnabled = false;
}).on( 'blur', '#comment_area', function (event) {
    navEnabled = true;
});

また、使用している jQuery のバージョンは何ですか? このコードは 1.7+ 用であり、古いバージョン用に調整する必要があります。

于 2013-06-06T16:25:02.070 に答える
0

を使用してその特定の要素にバインドしないのはどうですかnot():

$(document).not('#comment_area').on('keyup', function(e) {
      switch(e.keyCode) {
          case 37 : window.location = $('.prev').attr('href'); break;
          case 39 : window.location = $('.next').attr('href'); break;
      }
});
于 2013-06-06T16:24:53.683 に答える