動的に挿入されたテーブル：JQueryによって最後の行が検出されない

Question

ユーザー挿入に基づいて動的なテーブル行を作成するためにJQueryを使用しています。

マイHTML：

 <table id="list"> 
      <thead> 
       <tr> 
       <th>first header</th> 
       <th>second header</th> 
       <th>third header</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td><input type="text" name="first" /></td> 
       <td><input type="text" name="second" id="second" /></td> 
       <td><button class="alert hollow button" href="#">X</button>     </td> 
       </tr> 
      </tbody> 
    </table> 

とJavaScript：

$('#list tr:last td:nth-last-child(2) input[name=second]').keyup(function (event) { 

    if ($(this).val().length > 4 && $('#list tr:last td:nth-last-child(2) input[name=second]').val().length > 4) { 
     $('#list tbody').append('<tr> 
        <td><input type="text" name="first" /></td> 
        <td><input type="text" name="second" id="second" /></td> 
        <td><button class="alert hollow button" href="#">X</button></td> 
        </tr>'); 
    } 
}); 

上記のコードは最初の行だけのために働くと挿入された行は、コードビハインド何のJSを持っていません。

Answer 1

..あなたは、完全なコードを与えられていないが、私はこれがあなたの問題である疑いがある

この

$('#list').on('keyup', 'tr:last td:nth-last-child(2) input[name=second]', function (event) 

この

$('#list tr:last td:nth-last-child(2) input[name=second]').keyup(function (event) 

を交換してくださいあなたは、おそらく適切なイベントを使用していませんまだ存在しない要素（つまり、行が動的に追加されたと言います）にkeyupイベントをバインドしようとしています。代わりに、最初のドキュメントの一部であるテーブルにキーアップをバインドし、X条件を満たす子がkeyupイベントを発生したときに何が起こるかを言う

Answer 2

あなたの関数はページ上に存在しない要素新しい要素がその後追加されたときの負荷、あなたは思いますか、動的に生成された要素のためのon

$(document).on('keyup', '#list tr:last td:nth-last-child(2) input[name=second]', function (event) {