jQuery 移动表单:添加的字段没有样式

jQuery Mobile Form: Added fields aren't styled

本文关键字:字段 样式 添加 移动 表单 jQuery      更新时间:2023-09-26

我是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();