Enterキーを押した後に新しい行を入力する

Question

Enterキーを押した後に新しい行を追加したいとします。私のコードは1回しか追加できません。助けてください。

$(function() { 
 
    $('.items:last .item-quantity').keypress(function(e) { 
 
    var keyCode, path, duplicate; 
 

 
    keyCode = e.keyCode || e.which; 
 
    if(keyCode == '13') { 
 
     path = '.items:last'; 
 
     duplicate = $(path).clone(); 
 
     duplicate.children().val(null); 
 
     $(path).after(duplicate); 
 
     $(path + ' .item-name').focus(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12 items"> 
 
    <input type="text" class="form-control item-name col-xs-2" placeholder="Name"> 
 
    <input type="text" class="form-control item-quantity col-xs-2" placeholder="Quantity"> 
 
</div>

Answer 1

問題は、ページのロード時だけ最後input要素にkeypressイベントリスナーをアタッチしているということです。あなたは、新たに追加要素に関するイベントに耳を傾けるために、共通の祖先要素にハンドラをdelegate the event可能性：上記のスニペットで

$(document).on('keypress', '.items:last .item-quantity', function(event) { 
 
    var keyCode = event.keyCode || event.which; 
 
    var path = '.items:last'; 
 
    var $duplicate = $(path).clone(); 
 

 
    if (keyCode === 13) { 
 
    $duplicate.children().val(''); 
 
    $(path).after($duplicate); 
 
    $('.item-name', path).focus(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12 items"> 
 
    <input type="text" class="form-control item-name col-xs-2" placeholder="Name"> 
 
    <input type="text" class="form-control item-quantity col-xs-2" placeholder="Quantity"> 
 
</div>

は、イベントリスナーが documentオブジェクトに委譲されます。つまり、 documentオブジェクトを伝播するすべての keypressイベントに対してチェックが行われます。したがって、イベントリスナーを共通の祖先に直接アタッチすることができれば、より効率的になります。例えば

：

$('.parent-container').on('keypress', '.items:last .item-quantity', function(event) { 
 
    var keyCode = event.keyCode || event.which; 
 
    var path = '.items:last'; 
 
    var $duplicate = $(path).clone(); 
 

 
    if (keyCode === 13) { 
 
    $duplicate.find('input').val(''); 
 
    $(path).after($duplicate); 
 
    $('.item-name', path).focus(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent-container"> 
 
    <div class="col-xs-12 items"> 
 
    <input type="text" class="form-control item-name col-xs-2" placeholder="Name"> 
 
    <input type="text" class="form-control item-quantity col-xs-2" placeholder="Quantity"> 
 
    </div> 
 
</div>

Answer 2

だけfocus()を削除しますか？

$(function() { 
 
    $('.items:last .item-quantity').keypress(function(e) { 
 
    var keyCode, path, duplicate; 
 

 
    keyCode = e.keyCode || e.which; 
 
    if(keyCode == '13') { 
 
     path = '.items:last'; 
 
     duplicate = $(path).clone(); 
 
     duplicate.children().val(null); 
 
     $(path).after(duplicate); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12 items"> 
 
    <input type="text" class="form-control item-name col-xs-2" placeholder="Name"> 
 
    <input type="text" class="form-control item-quantity col-xs-2" placeholder="Quantity"> 
 
</div>