使用.append()时表单和输入字段不能正常工作

我试图将表单附加到我的.js文件中的文档主体。我按下按钮"继续"和形式出现。表单在屏幕上正确显示，但是输入字段不允许文本输入。

$(document).ready(function() {
    $('body').append('<div id="checkout"><button id="checkout2">Proceed </button></div>');
    $('#checkout').one('click', function(e) {
        $('body').html(
            '<div id="payarea"><h1 size="50"><u>Checkout</u> </h1></ br>' +
            '<form method="post" action="nav.html" >' +
            '<table width=518 border="0" cellpadding="0" cellspacing="0" >' +
              '<tr> ' +
                '<td height="22" colspan="3" align="center" ><strong>Billing Information </strong></td>' +
              '</tr>'+
              '<tr> '+
                '<td height="22" width="180" align="right" >Full name:</td>'+
                '<td colspan="2" align="left"><input type="text"  size="50"></td>'+
              '</tr>'+
            '</table>'+
            '<input id="payment1" type="submit" value="Send name">'+
            '</form>'+
            ' </div>');
    });
});

css。

input:not([type]) {
    padding: 1px 0px;
}
user agent stylesheetinput {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}
user agent stylesheetinput {
    margin: 0em;
    font: normal normal normal normal 13.3333330154419px/normal Arial;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}
user agent stylesheetinput {
    -webkit-writing-mode: horizontal-tb;
}