我有一个表单，其中javascript在我将其移植到jquery mobile之前正常工作。
http://jsfiddle.net/wynnwade/YrJRy/有一个jsFiddle。
代码是：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>iSTAFF</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/jqm132/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="/css/jqm_site.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<style type="text/css">
/* Smartphone Styling */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#splashLogo img{ width: 90%; }
} /* END SMARTPHONE STYLING */
@media screen and (min-width: 800px) {
.ui-li-desc {
margin: -2em 0 0 1.5em;
}
}
.invalid { border-color: #B00400; border-width: 2px;}
</style>
<script src="/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$. mobile.ajaxEnabled = false;
}); // END document.bind
</script>
<script src="/jqm132/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Primrose Everdeen</h1>
<a href="http://istaff.edrtest.com/staff/proforms" data-icon="arrow-l">FORMS</a>
</div><!-- /header -->
<div data-role="content">
<div class="jqm-home-welcome">
<h2>PURCHASE ORDER REQUEST</h2>
</div>
<form action="http://istaff.edrtest.com/staff/pro_amex_handler" method="post" accept-charset="utf-8">
<div data-role="fieldcontain">
<label for="raFName">First Name:</label>
<input type="text" id="raFName" name="raFName" value="Primrose" />
</div>
<div data-role="fieldcontain">
<label for="raLName">Last Name:</label>
<input type="text" id="raLName" name="raLName" value="Everdeen" />
</div>
<div data-role="fieldcontain">
<label for="email">Your Email:</label>
<input type="text" id="email" name="email" value="peverdeen@edrtrust.com" />
</div>
<div data-role="fieldcontain">
<label for="location" class="select">Location:</label>
<select id="location" name="location">
<option>Please select ...</option>
<option value="1">Betty White Plaza - Front Desk</options>
<option value="2">Betty White Plaza - Gym</options>
<option value="5">Common Convention Center - Concierge</options>
<option value="4">Common Convention Center - Front Desk</options>
</select>
</div>
<div data-role="fieldcontain">
<label for="vendor">Vendor/Store/Location:</label>
<input type="text" id="vendor" name="vendor" value="" />
</div>
<div>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr>
<th style="width:55%;">Item(detailed description)</th>
<th style="width:15%;">Quantity</th>
<th style="width:15%;">Unit Price</th>
<th style="width:15%;">Total</th>
</tr>
<tr class="itemRow">
<td>
<textarea name="i1-desc"></textarea>
</td>
<td class="qty">
<input type="text" id="i1-quantity" name="i1-quantity" value="0" />
</td>
<td class="price">
<input type="text" name="i1-unit-price" value="0.00" />
</td>
<td class="line_total">
<input type="text" name="i1-total" id="i1-total" class="inTotal" value="0.00" disabled="disabled" />
</td>
</tr>
<tr class="itemRow">
<td>
<textarea name="i2-desc"></textarea>
</td>
<td class="qty">
<input type="text" id="i2-quantity" name="i2-quantity" value="0" />
</td>
<td class="price">
<input type="text" name="i2-unit-price" value="0.00" />
</td>
<td class="line_total">
<input type="text" name="i2-total" id="i2-total" class="inTotal" value="0.00" disabled="disabled" />
</td>
</tr>
<tr class="itemRow">
<td>
<textarea name="i3-desc"></textarea>
</td>
<td class="qty">
<input type="text" id="i3-quantity" name="i3-quantity" value="0" />
</td>
<td class="price">
<input type="text" name="i3-unit-price" value="0.00" />
</td>
<td class="line_total">
<input type="text" name="i3-total" id="i3-total" class="inTotal" value="0.00" disabled="disabled" />
</td>
</tr>
<tr class="itemRow">
<td>
<textarea name="i4-desc"></textarea>
</td>
<td class="qty">
<input type="text" id="i4-quantity" name="i4-quantity" value="0" />
</td>
<td class="price">
<input type="text" name="i4-unit-price" value="0.00" />
</td>
<td class="line_total">
<input type="text" name="i4-total" id="i4-total" class="inTotal" value="0.00" disabled="disabled" />
</td>
</tr>
<tr class="itemRow">
<td>
<textarea name="i5-desc"></textarea>
</td>
<td class="qty">
<input type="text" id="i5-quantity" name="i5-quantity" value="0" />
</td>
<td class="price">
<input type="text" name="i5-unit-price" value="0.00" />
</td>
<td class="line_total">
<input type="text" name="i5-total" id="i5-total" class="inTotal" value="0.00" disabled="disabled" />
</td>
</tr>
<tr class="itemRow">
<td>
<textarea name="i6-desc"></textarea>
</td>
<td class="qty">
<input type="text" id="i6-quantity" name="i6-quantity" value="0" />
</td>
<td class="price">
<input type="text" name="i6-unit-price" value="0.00" />
</td>
<td class="line_total">
<input type="text" name="i6-total" id="i6-total" class="inTotal" value="0.00" disabled="disabled" />
</td>
</tr>
<tr class="itemRow">
<td>
<textarea name="i7-desc"></textarea>
</td>
<td class="qty">
<input type="text" id="i7-quantity" name="i7-quantity" value="0" />
</td>
<td class="price">
<input type="text" name="i7-unit-price" value="0.00" />
</td>
<td class="line_total">
<input type="text" name="i7-total" id="i7-total" class="inTotal" value="0.00" disabled="disabled" />
</td>
</tr>
<tr class="itemRow">
<td>
<textarea name="i8-desc"></textarea>
</td>
<td class="qty">
<input type="text" id="i8-quantity" name="i8-quantity" value="0" />
</td>
<td class="price">
<input type="text" name="i8-unit-price" value="0.00" />
</td>
<td class="line_total">
<input type="text" name="i8-total" id="i8-total" class="inTotal" value="0.00" disabled="disabled" />
</td>
</tr>
<tr style="background-color:#333;height:5px;font-size:0px;">
<td colspan="4"> </td>
</tr>
<tr>
<td align="center"> --- </td>
<td align="center">
<input type="text" id="numberItems" name="numberItems" value="0" />
</td>
<td align="center"> --- </td>
<td align="center">
<input type="text" id="totalPrice" name="totalPrice" value="0.00" disabled="disabled" />
</td>
</tr>
</table>
</div>
<div data-role="fieldcontain" style="text-align:center;">
<input type="submit" name="submit" value="SEND FORM" />
</div>
</form>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-position="fixed">
<h4><em>iSTAFF</em></h4>
</div><!-- /footer -->
</div><!-- /page -->
<script type="text/javascript">
(function() {
$('.price').on('blur', 'input', function(e){
var thisQ = $(this).closest('tr').find('td').eq(1).children('input').val();
var thisP = $(this).val();
var thisT = parseFloat(thisQ) * parseFloat(thisP);
$(this).closest('tr').find('.inTotal').empty().val( parseFloat(thisT).toFixed(2));
running_total();
});
})(); // end self-invoking anonymous function
function running_total(){
var n1 = $('#i1-quantity').val();
var n2 = $('#i2-quantity').val();
var n3 = $('#i3-quantity').val();
var n4 = $('#i4-quantity').val();
var n5 = $('#i5-quantity').val();
var n6 = $('#i6-quantity').val();
var n7 = $('#i7-quantity').val();
var n8 = $('#i8-quantity').val();
var rCnt = parseFloat(n1)+parseFloat(n2)+parseFloat(n3)+parseFloat(n4)+parseFloat(n5)+parseFloat(n6)+parseFloat(n7)+parseFloat(n8);
$('#numberItems').val( parseFloat(rCnt) );
var t1 = $('#i1-total').val();
var t2 = $('#i2-total').val();
var t3 = $('#i3-total').val();
var t4 = $('#i4-total').val();
var t5 = $('#i5-total').val();
var t6 = $('#i6-total').val();
var t7 = $('#i7-total').val();
var t8 = $('#i8-total').val();
var rTot = parseFloat(t1)+parseFloat(t2)+parseFloat(t3)+parseFloat(t4)+parseFloat(t5)+parseFloat(t6)+parseFloat(t7)+parseFloat(t8);
$('#totalPrice').val( parseFloat(rTot).toFixed(2) );
} // end function
</script>
</body>
</html>
问题在于jQuery Mobile无法再找到“total”单元格来放置unit * unit_price的产品，因为jqueryMobile会添加div和其他元素以实现酷炫的移动样式。
非常感谢任何资源的帮助或建议。
答案 0 :(得分：2)
(function() {
$('.price').on('blur', 'input', function(e){
// var thisQ = $(this).closest('tr').find('td').eq(1).children('input').val();
var thisQ = $(this).closest('tr').find('.qty input').val();
var thisP = $(this).val();
var thisT = parseFloat(thisQ) * parseFloat(thisP);
// $(this).closest('tr').find('.inTotal').empty().val( parseFloat(thisT).toFixed(2));
$(this).closest('tr').find('.inTotal').val( parseFloat(thisT).toFixed(2));
running_total();
});
})(); // end self-invoking anonymous function