按回車後的jquery新行

Question

我想在按回車後添加一個新行。我的代碼只能添加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

的問題是，你只安裝了keypress事件偵聽到最後input元素在頁面加載時。你可以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>