JQuery автоматически добавляет новый вход, предотвращает предыдущие

Question

Я пытаюсь создать форму счета, которая автоматически создает следующее поле ввода, когда последний созданный вход получает фокус, например. вставляется в.

У меня есть основная функциональность, которую я хочу, но с одной проблемой. Я только хочу добавить новое поле, когда только очень последний вход получает фокус, но в настоящее время он все еще добавляет новое поле, если в любом из предыдущих поле получает фокус.

Моя мысль заключалась в том, чтобы добавить новый класс в последнее поле, а затем удалить его при добавлении следующего ввода, но потому, что я использую функцию делегата на #invoice, которая не имеет желаемого эффекта.

jFiddle here

$(function() { 
var wrapper = $(".clone_services"); //Input wrapper 
var x = 1; //initial index count 
    $('#invoice').on('focus', '.clone_services', function(){ 
     $('.new').focus(function(){ //on add input button click 
     $(this).removeClass('new'); 
     $(wrapper).append('<br><input type="text" class="services new" name="services['+ x +']"/>'); 
     }); 
    }); 

});

Answer 1

Пожалуйста, обратите внимание на обновленной скрипке:

https://jsfiddle.net/rea0edeh/3/

Там нет необходимости добавлять focus события 2-х элементы. Достаточно одного.

$(function() { 
    var wrapper = $(".clone_services"); //Input wrapper 
    var x = 1; //initial index count 
     $('.clone_services').on('focus','.new' , function(){ 
      $(this).removeClass('new'); 
      $(wrapper).append('<br><input type="text" class="services new" name="services['+ x +']"/>'); 
      x++; 
      }); 

}); 

Answer 2

Как об этом:

$(document).on('focus', '.clone_services > .new', function() { 
    var $line = $(this).clone(); 
    $(this).removeClass('new').closest('.clone_services').append($line); 
}); 

https://jsfiddle.net/rea0edeh/4/

Вы можете комбинировать его с

$(document).on('blur', '.clone_services > *', function() { 
    if ($.trim($(this).val()) === "") $(this).remove(); 
}); 

https://jsfiddle.net/rea0edeh/5/