Почему добавление поля ввода не работает?

Question

Когда пользователь вводил key press, я использовал JQuery для отправки form и после добавления другого поля <input> для другого ввода. Но проблема заключается в том, что поле ввода ввода не работает ... Вместо этого оно ожидает старого.

Код

// HTML

<div class="ten columns"> 
    <input id="txt_name" class="u-full-width" name="a" type="text" autofocus> 
</div> 

// Javascript

$('#txt_name').keypress(function (e) { 
    if (e.which == 13) { 
    $.getJSON('/_main_submit', { 
     a: $('input[name="a"]').val(), 
    }, function(data){ 
     $('.after_sub').append(
       '<div class="ten columns">'+ 
       '<input id="txt_name" class="u-full-width" name="a" type="text" autofocus>'+ 
       '</div>' 
     ) 
     $('div input').focus(); 

    }) 
    return false; 
    } 
}); 

Answer 1

Вы можете иметь только один элемент с определенным идентификатором в DOM. Используйте классы вместо идентификаторов для полей ввода. Ваш новый ввод также имеет то же имя, которое также должно быть изменено, если вы ожидаете, что форма имеет более одного поля ввода.