Здравствуйте!
Изучаю jQuery по книге "Адам Фримен - jQuery для профессионалов (Expert's Voice) - 2013", Разбираю код реагирования на изменения значений формы:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-1.7.js" type="text/javascript"></script>
<script src="jquery.tmpl.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript">
$(document).ready(function() {
var data = [
{ name: "Astor", product: "astor", stocklevel: "10", price: "2.99"},
{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: "1.99"},
{ name: "Rose", product: "rose", stocklevel: "2", price: "4.99"},
{ name: "Peony", product: "peony", stocklevel: "0", price: "1.50"},
{ name: "Primula", product: "primula", stocklevel: "1", price: "3.12"},
{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: "0.99"},
];
var templResult = $('#flowerTmpl').tmpl(data);
templResult.slice(0, 3).appendTo('#row1');
templResult.slice(3).appendTo("#row2");
$('input').focus(handleFormFocus).blur(handleFormFocus);
function handleFormFocus(e) {
var borderVal = e.type == "focus" ? "medium solid green" : "";
$(this).css("border", borderVal);
}
var total = $('#buttonDiv')
.prepend("<div>Total Items: <span id=total>0</span></div>")
.css({clear: "both", padding: "5px"});
$('<div id=bbox />').appendTo("body").append(total).css("clear: left");
$('input').change(function(e) {
var total = 0;
$('input').each(function(index, elem) {
total += Number($(elem).val());
});
$('#total').text(total);
});
});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
<div class="dcell">
<img src="${product}.png"/>
<label for="${product}">${name}: </label>
<input name="${product}" value="0" required />
</div>
</script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<form method="post" action="http://node.jacquisflowershop.com/order">
<div id="oblock">
<div class="dtable">
<div id="row1" class="drow">
</div>
<div id="row2"class="drow">
</div>
</div>
</div>
<div id="buttonDiv"><button type="submit">Place Order</button></div>
</form>
</body>
</html>
Если нажать на submit, то ничего не происходет. Если закомментировать код
var total = $('#buttonDiv')
.prepend("<div>Total Items: <span id=total>0</span></div>")
.css({clear: "both", padding: "5px"});
$('<div id=bbox />').appendTo("body").append(total).css("clear: left");
$('input').change(function(e) {
var total = 0;
$('input').each(function(index, elem) {
total += Number($(elem).val());
});
$('#total').text(total);
});
то отправка происходит.
Подскажите пожалуйста, в чем может быть проблема?