Question

我是JavaScript和jQueryMobile的新手，所以请放轻松（我正在为学校项目构建一个预算应用程序。它需要用户的收入，乘以薪水的频率），将其保存到本地存储，并在页面顶部进行更新。

我的问题是我有＆＃34;添加另一个＆＃34;按钮，允许用户添加第二个收入来源。但是，出于某种原因，用户添加的字段没有采用jQuery Mobile样式。

以下是页面：http://home.ubalt.edu/students/id59wk98/idia616/app-new/income.html。点击＆＃34;添加更多＆＃34;查看新添加的表单字段，它们没有显示jQuery Mobile样式。

usrAdded div是更新按钮上方新字段的填充位置。这是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);       
}

任何想法都会非常感激。谢谢！

Answer 1

您必须手动增强这些元素。

$("#incomeForm").enhanceWithin();

jQuery Mobile Form：添加的字段没有样式

1 个答案: