jQuery 移动表单:添加的字段没有样式
jQuery Mobile Form: Added fields aren't styled
我是JavaScript和jQueryMobile的新手,所以请放轻松(:我正在为一个学校项目构建一个预算应用程序。它获取用户的收入,乘以薪水的频率,将其保存到本地存储,并在页面顶部更新。
我的问题是我有"添加另一个"按钮,它允许用户添加第二个收入来源。但是,由于某种原因,用户添加的字段没有选取jQuery Mobile样式。
这是页面:http://home.ubalt.edu/students/id59wk98/idia616/app-new/income.html。单击"添加更多"以查看新添加的表单字段,这些表单字段不显示jQuery Mobile样式。
usrAdddiv 是新字段所在的位置,位于"更新"按钮上方。这是 HTML。
<div class="ui-field-contain">
<div id="usrAdded"></div>
<div style="width:50%;">
<input type="button" value="Update" id="paycheckButton" />
</div>
</div>
<div class="ui-field-contain">
<div style="width:50%;">
<input type="button" class="ui-btn ui-icon-plus ui-btn-icon-right ui-alt-icon ui-nodisc-icon" id="addMoreButton" value="Add Another<br/>Source of Income">
</div>
</div>
这是与添加更多按钮关联的 JavaScript。
window.onload = function()
{
var moreButton = document.getElementById("addMoreButton");
moreButton.onclick = moreIncome;
}
function moreIncome()
{
var incomeForm = document.getElementById("usrAdded");
var newLabel = document.createElement("select");
var payPeriod1 = document.createElement("option");
var payPeriod2 = document.createElement("option");
var payPeriod3 = document.createElement("option");
var newValue = document.createElement("input");
var spacer = document.createElement("br");
var newFieldLabel1 = document.createElement("label");
var newFieldLabel2 = document.createElement("label");
newLabel.setAttribute("type", "text");
newLabel.setAttribute("class", "usrIncome");
newValue.setAttribute("type", "number");
newValue.setAttribute("class", "incomeAmount");
newValue.setAttribute("default", "0");
payPeriod1.setAttribute("value", "weekly");
payPeriod2.setAttribute("value", "biweekly");
payPeriod3.setAttribute("value", "monthly");
incomeForm.appendChild(newFieldLabel1);
newFieldLabel1.innerHTML = "How often are you paid?";
incomeForm.appendChild(newLabel);
newLabel.appendChild(payPeriod1);
payPeriod1.innerHTML = "Every Week";
newLabel.appendChild(payPeriod2);
payPeriod2.innerHTML = "Every 2 Weeks";
newLabel.appendChild(payPeriod3);
payPeriod3.innerHTML = "Monthly";
incomeForm.appendChild(newFieldLabel2);
newFieldLabel2.innerHTML = "How much do you earn each paycheck?";
incomeForm.appendChild(newValue);
}
任何想法将不胜感激。谢谢!
您必须手动增强这些元素。
$("#incomeForm").enhanceWithin();
相关文章:
- 使用getElementById设置动态ID的输入字段的样式
- 如何在jQuery Form Validator中重置字段样式
- 如何更改表单的样式's字段标签
- 使用Javascript为输入字段添加边框样式颜色(提交时没有值),该字段已经在css中带有!important标签的边
- jQuery 移动表单:添加的字段没有样式
- 可以't从javascript访问CSS的某些样式字段
- HTML输入AJAX更新-使用Bootstrap将样式添加到输入字段
- 如何使用内联背景颜色样式设置窗体输入字段的样式
- 输入字段的样式字体(Angularjs)
- Jquery移动动态字段未应用样式
- Javascript选择所有带有数组样式名称的HTML输入字段
- 当达到最大长度限制时,更改输入字段样式
- 仅当指定的样式存在时,用JavaScript验证字段-不使用jQuery验证
- 如何根据java中对象的变化来更改HTML字段的样式
- jQuery列表,样式<字段
- 使用java脚本在acrobatpdf表单中更改字段数字样式
- 将输入表单以datepicker样式附加到输入字段
- 不能用jquery标签输入样式字段提交表单数据
- 根据get_post_custom()字段更改样式
- 带有jquery和HTML列表元素的样式化选择字段