表单和输入字段使用.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>'); 

    }); 
}); 

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