0
jquery 모바일에 이식하기 전에 javascript가 올바르게 작동하는 양식이 있습니다.jQueryMobile에 양식을 이동하면 자바 스크립트가 깨졌습니다.
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="[email protected]" />
</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를 모바일 더 이상 * jqueryMobile 이후 UNIT_PRICE이 div의 멋진 모바일 스타일링 다른 요소를 추가 단위의 제품을 넣어 "총"셀을 찾을 수 있다는 것입니다 .
자원에 대한 도움이나 제안은 대단히 감사하겠습니다.
완벽하게 작동합니다. 감사! – jgravois