javascript - 使用 .append() 时表单和输入字段无法正常工作

Question

我正在尝试将表单附加到 .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;
}

Answer 1

我在 jsfiddle 中实现了你的代码.

HTML

<div id="checkout"><button id="checkout2">Proceed </button></div>

jQuery

$(document).ready(function() {
    $('#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>');

    });
});

输入字段允许文本输入，因此没有问题，除非有其他代码使输入字段只读或禁用。右键单击您的元素并使用检查元素查看字段属性。