jquery - 刪除後追加

Question

後按鍵「，」我追加新的輸入，當我使用退格鍵刪除最後一個輸入時，但刪除所有輸入時，當我再次按下「，」代碼返回所有輸入，而不是一個。如何修復它？

http://jsfiddle.net/3r79hyoL/

$(".multipleField").keyup(function(e) { 
var key = e.which ? e.which : event.keyCode; 
if (key == 110 || key == 188) { 
    e.preventDefault(); 
    var value = $(this).val(); 
    $(this).val(value.replace(",", "")); 
    $(this).first().clone().appendTo(".multipleFields").focus().val(""); 
    event.preventDefault(); 

    $(this).addClass('makeBorder'); 
    replaceAndCopy(); 

} 

if (key == 8) { 
    e.preventDefault(); 
    if ($(".multipleFields").last().val() == "" && $(".multipleField").length > 1) { 
     $(".multipleField").last().remove(); 
     $(".multipleField").last().focus(); 
    } 
} 
}); 

function replaceAndCopy() { 
$(".multipleField").keyup(function(e) { 
    var key = e.which ? e.which : event.keyCode; 
    if (key == 110 || key == 188) { 
     e.preventDefault(); 
     var value = $(this).val(); 
     $(this).val(value.replace(",", "")); 
     $(this).clone().appendTo(".multipleFields").focus().val(""); 

     $(this).addClass('makeBorder'); 

     replaceAndCopy(); 

    } 

    if (key == 8) { 
     if ($(".multipleFields").last().val() == "" && 
$(".multipleField").length != 1) { 
      $(".multipleField:last").remove(); 
      e.preventDefault(); 

      $(".multipleField").last().focus(); 
     } 
    } 
}); 
} 

Answer 1

的問題是要附加新的事件偵聽器的每一個輸入。因此，當您返回不是最後一個輸入的輸入時，該事件將被多次觸發。

function replaceAndCopy() { 
// Add new event listener to all inputs, instead of the last 
// $(".multipleField").keyup(function(e) { 
// Change to 
$(".multipleField").last().keyup(function(e) { 
    var key = e.which ? e.which : event.keyCode; 
    if (key == 110 || key == 188) { 
     e.preventDefault(); 
     var value = $(this).val(); 
     $(this).val(value.replace(",", "")); 
     $(this).clone().appendTo(".multipleFields").focus().val(""); 

     $(this).addClass('makeBorder'); 

     replaceAndCopy(); 

    } 

    if (key == 8) { 
     if ($(".multipleFields").last().val() == "" && $(".multipleField").length != 1) { 
      $(".multipleField:last").remove(); 
      e.preventDefault(); 

      $(".multipleField").last().focus(); 
     } 
    } 
});