javascript - 通过 JavaScript 添加的元素的样式不适用于我的 Phonegap 项目
问题描述
我有一个 Phonegap 项目，其中的样式链接到 jQuery Mobile。我还有一个 javascript 函数，通过单击按钮将行附加到表中。
我的 index.html 中的初始元素应用良好，但我的 javascript 函数添加的行没有应用所需的样式。
下面的代码：（index.html，js文件和css）
function AddReceiptsRowElement() {
//Start: Add Receipts objects
//For select name and id
selReceiptsName = $('#table-add-receipts tbody tr:last td:first select').attr('name');
selReceiptsPrefix = selReceiptsName.split('-')[0];
selReceiptsNum = Number(selReceiptsName.split('-')[1]);
selReceiptsNum += 1;
selReceiptsName = selReceiptsPrefix+"-"+selReceiptsNum;
selReceiptsId = selReceiptsName;
//For text area name and id
taReceiptsDescName = $('#table-add-receipts tbody tr:last td:nth-child(2) textarea').attr('name');
taReceiptsDescPrefix = taReceiptsDescName.split('-')[0];
taReceiptsDescNum = Number(taReceiptsDescName.split('-')[1]);
taReceiptsDescNum += 1;
taReceiptsDescName = taReceiptsDescPrefix+"-"+taReceiptsDescNum;
taReceiptsDescId = taReceiptsDescName;
//For input
tReceiptsAmtName = $('#table-add-receipts tbody tr:last td:nth-child(3) input').attr('name');
tReceiptsAmtPrefix = tReceiptsAmtName.split('-')[0];
tReceiptsAmtNum = Number(tReceiptsAmtName.split('-')[1]);
tReceiptsAmtNum += 1;
tReceiptsAmtName = tReceiptsAmtPrefix+"-"+tReceiptsAmtNum;
tReceiptsAmtId = tReceiptsAmtName;
//For Delete button
btnDelReceiptsId = $('#table-add-receipts tbody tr:last td:nth-child(4) a').attr('id');
btnDelReceiptsIdPrefix = btnDelReceiptsId.split('-')[0];
btnDelReceiptsIdNum = Number(btnDelReceiptsId.split('-')[1]);
btnDelReceiptsIdNum += 1;
btnDelReceiptsId = btnDelReceiptsIdPrefix+"-"+btnDelReceiptsIdNum;
//Adding new row in Add Receipts table
newRowContent = "<tr><td class='add-receipts-type'><select name="+ selReceiptsName +" id="+ selReceiptsId +" data-mini='true'><option value='1'>Tithes</option><option value='2'>Offering</option><option value='3'>Designated</option></select></td><td><textarea cols='40' rows='1' name="+ taReceiptsDescName +" id=" + taReceiptsDescId +"></textarea></td><td><input type='text' data-clear-btn='true' name="+ tReceiptsAmtName +" id="+ taReceiptsDescId +" value='0' onblur='value=accounting.formatNumber(value,2)'></td><td><a href='#' id="+ btnDelReceiptsId +" data-role='button' data-icon='delete' data-iconpos='notext'>Delete</a></td></tr>";
$("#table-add-receipts tbody").append(newRowContent);
//End: Add Receipts objects
}#footer {
text-align: center;
}
#btnAddReceipts {
margin: 0;
width: 10%;
}
#btnAddInventory {
margin: 0;
width: 10%;
}
a.ui-link.ui-btn.ui-icon-delete.ui-btn-icon-notext.ui-shadow.ui-corner-all {
background-color: red;
}
.add-receipts-type {
width: 25%;
}
#add-inventory-type {
width: 25%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>GEM App</title>
<!-- JQuery Assets -->
<script src="assets/js/accounting.min.js"></script>
<!-- JQuery Mobile -->
<link rel="stylesheet" href="assets/css/jquery.mobile-1.4.5.min.css" />
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/jquery-migrate-3.0.1.min.js"></script>
<script src="assets/js/jquery.mobile-1.4.5.min.js"></script>
<!-- Custom -->
<link rel="stylesheet" href="assets/css/styles.css" />
<script src="assets/js/main.js"></script>
</head>
<body>
<script type="text/javascript" src="../platforms/browser/platform_www/cordova.js"></script>
<div data-role="main" class="ui-content">
<div data-role="header">
<h1>GEM App</h1>
</div> <!---header--->
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li><a href="#funds" data-theme="a">Funds</a></li>
<li><a href="#inventory" data-theme="a">Inventory</a></li>
<li><a href="#search" data-theme="a">Notes</a></li>
</ul>
</div>
<div id="funds" class="ui-content">
<h3>Add Receipts</h3>
<form>
<table data-role="table" id="table-add-receipts" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1"><abbr title="Tithes, Offering, Designated...">Type</abbr></th>
<th>Description</th>
<th data-priority="2">Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="add-receipts-type">
<select name="selReceiptsType-1" id="selReceiptsType-1" data-mini="true">
<option value="1">Tithes</option>
<option value="2">Offering</option>
<option value="3">Designated</option>
</select>
</td>
<td><textarea cols="40" rows="1" name="taReceiptsDesc-1" id="taReceiptsDesc-1"></textarea></td>
<td><input type="text" data-clear-btn="true" name="tReceiptsAmt-1" id="tReceiptsAmt-1" value="0" onblur="value=accounting.formatNumber(value,2)"></td>
<td><a href="#" id="btnDelReceipts-1" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a></td>
</tr>
</tbody>
</table>
<a onclick="AddReceiptsRowElement()" id="btnAddReceipts" data-role="button" data-icon="plus" data-mini="true">Add Record</a>
</form>
</div><!-- funds -->
<div id="inventory" class="ui-content">
<h3>Inventory</h3>
<form>
<table data-role="table" id="table-inventory" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1"><abbr title="Type of Inventory">Type</abbr></th>
<th>Description</th>
<th data-priority="2">Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td id="add-inventory-type">
<select name="selInventoryType-1" id="selInventoryType-1" data-mini="true">
<option value="1">Supplies</option>
<option value="2">Instrument</option>
<option value="3">Others</option>
</select>
</td>
<td><textarea cols="40" rows="1" name="taInventoryDesc-1" id="taInventoryDesc-1"></textarea></td>
<td><input type="text" data-clear-btn="true" name="tInventoryDate-1" id="tInventoryDate-1" value="0"></td>
<td><a href="#" id="btnDelInventory-1" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a></td>
</tr>
</tbody>
</table>
<a onclick="AddInventoryRowElement()" id="btnAddInventory" data-role="button" data-icon="plus" data-mini="true">Add Record</a>
</form>
</div><!-- inventory -->
<div id="search" class="ui-content">
<h3>Notes</h3>
<form>
<textarea cols="40" rows="1" name="taNotes-1" id="taNotes-1"></textarea>
</form>
</div><!-- search -->
</div>
<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
<p>Powered by Flexaiosys<span class="jqm-version"></span></p>
<p>Copyright 2018</p>
</div><!-- footer -->
</div><!-- main -->
</body>
</html>解决方案
推荐阅读
- mongodb - 整个嵌入文档的索引
- javascript - Create a nested array of objects from flat object array with childIds
- iis - 将 ASP.NET Core 3 与单页应用程序一起使用的优缺点
- mysql - 在 Node.js 应用程序中用 MySQL 替换 MongoDB
- c - 为什么 while(*s++ == *t++) 不能比较两个字符串
- delphi - 从 https 站点检索 json 结果
- python - 我可以让 Python 在我的 PC 上使用这个其他程序吗？
- visual-studio-code - VSCode 注释不是内联的
- javascript - 元素函数 appendchild 为空错误
- javascript - 在车把内执行 javascript 函数