JqueryがJavaScriptで作成されたテーブルで機能していない

私は完全にjavascriptで作成したテーブルを持っていますが、Jqueryコードでは使いたくありません：/私が手動で作成したテーブル（HTMLで）。下のフィドルを見てください。JqueryがJavaScriptで作成されたテーブルで機能していない

FYIこのjqueryのコードは単に入力（テーブルセル）間のナビゲーションのために矢印キーを使用するユーザーをALOWすべき

ここでは、私は頭の中で私のスクリプトを読み込むjsFiddle

ことです：

<head> 
    <meta charset="UTF-8"> 
    <title>My Page</title> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> 
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/js.js"></script> 
    </head>

ここに表が作成されます（本文内）：

<div id="myTable"> 
    </div> 
    <script type="text/javascript"> 
    createTable(); 
    addPerson(1); 
    </script>

これは私のjQueryのです：

$(document).ready(function() { 

    $('input').keydown(function(e) { 
     if (e.keyCode == 40 || e.keyCode == 13) { 
      var thisClass = $(this).parent().attr('class'); 
      $(this).parent().parent().next('tr').children('.' + thisClass).children().focus(); 
     } 
    }); 

    $('input').keydown(function(e) { 
     if (e.keyCode == 39) { 
      $(this).parent().next('td').children('input').focus(); 
     } 
    }); 

    $('input').keydown(function(e) { 
     if (e.keyCode == 38) { 
      var thisClass = $(this).parent().attr('class'); 
      $(this).parent().parent().prev('tr').children('.' + thisClass).children().focus(); 
     } 
    }); 

    $('input').keydown(function(e) { 
     if (e.keyCode == 37) { 
      $(this).parent().prev('td').children('input').focus(); 
     } 
    }); 
});

出典

2017-01-22 Hovadko

イベントリスナーは既存の要素にのみ接続します。あなたは、動的に作成された要素に対処するために文書化し、それを接続する必要があります。

$(document).on('keydown', 'input', function(e) { 
    // keycode first 
    if (e.keyCode==40 || e.keyCode==13) { 
    } 

    // keycode second etc. 
    if (e.keyCode==39) { 
    } 

    if (e.keyCode==38) { 
    } 

    if (e.keyCode==37) { 
    } 
});

UPD実際にはそれが非常に大きい場合、文書にリスナーを接続することは悪い考えです。リスナーを作成した後、そのエレメントにリスナーをアタッチすることができます。

出典

2017-01-22 20:40:35

なぜ多くのリスナーを使用しますか？ 1つだけを使用してください。 –

ありがとうございます。私は悪いプログラマーであるので、私はこの多くのリスナーを使用します;）あまりにもありがとう、私はそれを修正する方法を学ぶときに:) – Hovadko

更新された答えを見てください。 –

あなたはおそらく、テーブルが作成される前イベントをバインドしようとしました。代わりにonメソッドを使用してみてください。

また、本体または他の親要素のように、表の作成前に存在していた既存の親要素にイベントを添付する必要があります。

$('body').on('keydown', "input", function(e) { 
    if (e.keyCode==40 || e.keyCode==13) { 
     var thisClass = $(this).parent().attr('class'); 
     $(this).parent().parent().next('tr').children('.'+thisClass).children().focus(); 
    } 
});

これを例として取り上げてください。別のラッピング要素を使用し、要素名の代わりにクラスまたはIDを使用してバインドすることをお勧めします。

出典

2017-01-22 20:38:53

JqueryがJavaScriptで作成されたテーブルで機能していない

答えて

関連する問題