Созданное текстовое поле пропало при нажатии на него

Question

Я экспериментирую с jquery, и я столкнулся с проблемой после игры со сценарием, который я нашел в Интернете.

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

$(function() { 

var input = $('<input type="text" />'); 
var newFields = $(''); 

$('#qty').bind('blur keyup change', function() { 
    var n = this.value || 0; 
    if (n+1) { 
     if (n > newFields.length) { 
      addFields(n); 
     } else { 
      removeFields(n); 
     } 
    } 
}); 

function addFields(n) { 
    for (i = newFields.length; i < n && i<20; i++) { 
     var somestr = "Length of Sample "; 
     var num = i+1; 
     var newInput = input.clone(); 
     newFields = newFields.add(newInput);   
     $('#newFields').append(somestr+num+":"); 
     newInput.appendTo('#newFields'); 
    } 
} 

function removeFields(n) { 
    var removeField = newFields.slice(n).remove(); 
     $('#newFields').remove(); 
    newFields = newFields.not(removeField); 
} 
}); 

Answer 1

Я хотел бы только связать вашу функцию blur, которая не является, когда поле ввода больше не выбран

$('#qty').bind('blur', function() { 
    ... The function ... 

Demo

После немного поиграть с ним, я обнаружил, что были некоторые ошибки в удалении некоторых объектов после первого удаления. Я немного испортил его, но потом решил, что было бы проще иметь отдельные add и remove, а всего лишь метод set. Check out the demo, он отлично работает. Единственным недостатком является то, что вы не сохраните старые входы (так что их поля будут пустыми каждый раз)