Enter鍵創建新行並注重當前輸入字段

Question

<table width="500" border="1"> 
    <tr> 
     <td>No.</td> 
     <td>Name</td> 
     <td>Age</td> 
     <td>Phone</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td><input type="text" class="inputs" name="name_1" id="name_1" /></td> 
     <td><input type="text" class="inputs" name="age_1" id="age_1" /></td> 
     <td><input type="text" name="phone_1" class="inputs lst" id="phone_1" /></td> 
    </tr> 
</table> 

<script> 
    var i = $('table tr').length; 

    $('.lst').on('keyup', function (e) { 
     var code = (e.keyCode ? e.keyCode : e.which); 
     if (code == 13) { 
      html = '<tr>'; 
      html += '<td>' + i + '</td>'; 
      html += '<td><input type="text" class="inputs" name="name_' + i + '" id="name_' + i + '" /></td>'; 
      html += '<td><input type="text" class="inputs" name="age_' + i + '" id="age_' + i + '" /></td>'; 
      html += '<td><input type="text" class="inputs lst" name="phone_' + i + '" id="phone_' + i + '" /></td>'; 
      html += '</tr>'; 
      $('table').append(html); 
      $(this).focus().select(); 
      i++; 
     } 
    }); 

    $('.inputs').keydown(function (e) { 
     var code = (e.keyCode ? e.keyCode : e.which); 
     if (code == 13) { 
      var index = $('.inputs').index(this) + 1; 
      $('.inputs').eq(index).focus(); 
     } 
    }); 
</script> 

在這種形式最初集中在第一個文本框，然後按回車鍵自動聚焦到附近的輸入域的死衚衕，而我們按ENTER鍵然後它會創建新的行並將焦點放在新創建的行 中顯示的初始輸入字段，然後按回車鍵它不會將焦點靠近文本字段，請幫助解決此問題。
在第一排它正常工作，而我們進入第二排它不工作

請幫助

Answer 1

你需要event delegation像下面的動態生成的元素。

var i = $('table tr').length; 
 

 
$(document).on('keyup', '.lst', function(e) { 
 
    var code = (e.keyCode ? e.keyCode : e.which); 
 
    if (code == 13) { 
 
    html = '<tr>'; 
 
    html += '<td>' + i + '</td>'; 
 
    html += '<td><input type="text" class="inputs" name="name_' + i + '" id="name_' + i + '" /></td>'; 
 
    html += '<td><input type="text" class="inputs" name="age_' + i + '" id="age_' + i + '" /></td>'; 
 
    html += '<td><input type="text" class="inputs lst" name="phone_' + i + '" id="phone_' + i + '" /></td>'; 
 
    html += '</tr>'; 
 
    $('table').append(html); 
 
    $(this).focus().select(); 
 
    i++; 
 
    } 
 
}); 
 

 
$(document).on('keydown', '.inputs', function(e) { 
 
    var code = (e.keyCode ? e.keyCode : e.which); 
 
    if (code == 13) { 
 
    var index = $('.inputs').index(this) + 1; 
 
    $('.inputs').eq(index).focus(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="500" border="1"> 
 
    <tr> 
 
     <td>No.</td> 
 
     <td>Name</td> 
 
     <td>Age</td> 
 
     <td>Phone</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td><input type="text" class="inputs" name="name_1" id="name_1" /></td> 
 
     <td><input type="text" class="inputs" name="age_1" id="age_1" /></td> 
 
     <td><input type="text" name="phone_1" class="inputs lst" id="phone_1" /></td> 
 
    </tr> 
 
</table>