jQueryインクリメントボタン更新値が更新されているが、値の変更は更新されていない

Question

入力の前と後ろにplusマイナスボタンを追加して動作させると、数量が更新されても更新されません。私がクリックして入力ボックスから戻ってこない限り、価格/合計。入力ボックスをクリックせずに数量を更新するにはどうすればよいですか？システムには、数量が変更されたときに価格を更新するコードが既にありますが、ボックス内をクリックした後にのみ、プラスまたはマイナスのボタンを使用したときに変更された値が読み取られません。

$('input#w3934_txtQantity').before("<input type='button' value='-' class='qtyminus' field='w3934_txtQantity' />"); 
 
$('input#w3934_txtQantity').after("<input type='button' value='+' class='qtyplus' field='w3934_txtQantity' />"); 
 

 

 
$('.qtyplus').click(function(e){ 
 
     e.preventDefault(); 
 
     fieldName = $(this).attr('field'); 
 
     var currentVal = parseInt($('#w3934_txtQantity').val()); 
 
     if (!isNaN(currentVal)) { 
 
      $('#w3934_txtQantity').val(currentVal + 10); 
 
     } else { 
 
      $('#w3934_txtQantity').val(0); 
 
     } 
 
    }); 
 
    $(".qtyminus").click(function(e) { 
 
     e.preventDefault(); 
 
     fieldName = $(this).attr('field'); 
 
     var currentVal = parseInt($('#w3934_txtQantity').val()); 
 
     if (!isNaN(currentVal) && currentVal > 0) { 
 
      $('#w3934_txtQantity').val(currentVal - 10); 
 
     } else { 
 
      $('#w3934_txtQantity').val(0); 
 
     } 
 
\t \t 
 
    }); 
 
    
 
$('#w3934_txtQantity').trigger('change');

input { 
 
    width: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table cellspacing="0" border="0" style="width:100%;height:100%;padding-top:5px;"> 
 
<tr> 
 
<td valign="bottom"><span id="w3934_lblQuantity" style="white-space:nowrap;">Quantity</span></td><td valign="bottom"><span id="w3934_lblUnitPrice" style="white-space:nowrap;">Unit Price</span></td> 
 
<td><span id="w3934_lblAddlCharges" style="display:inline-block;width:110px;">Setup</span></td> 
 
<td valign="bottom"><span id="w3934_lblShip">Shipping</span></td><td valign="bottom" style="text-align:right;"><span id="w3934_lblSubTotal" style="white-space:nowrap;">Subtotal</span></td></tr> 
 
<tr> 
 
<td class="SubTotalLine"><input name="w3934$txtQantity" type="text" value="170" id="w3934_txtQantity" class="medText formField" style="text-align:right;" /></td> 
 
<td class="SubTotalLine"><input name="w3934$txtUnitPrice" type="text" value="$2.00" readonly="readonly" id="w3934_txtUnitPrice" class="medText formField DisplayTextBox" style="margin-top:5px;text-align:center;" /></td> 
 
<td class="SubTotalLine"><input name="w3934$txtAddlCharges" type="text" value="$55.00" readonly="readonly" id="w3934_txtAddlCharges" class="medText formField DisplayTextBox" style="margin-top:5px;text-align:center;" /></td> 
 
<td class="SubTotalLine"><input name="w3934$txtShip" type="text" readonly="readonly" id="w3934_txtShip" class="medText formField DisplayTextBox" style="margin-top:5px;text-align:center;" /></td> 
 
<td class="SubTotalLine" align="right"><input name="w3934$txtSubTotal" type="text" value="$395.00" readonly="readonly" id="w3934_txtSubTotal" class="medText formField DisplayTextBox" style="margin-top:5px;" /></td> 
 
</tr> 
 
</table>

Answer 1

あなたは合計を更新するためのコードを追加しませんでしたが、あなたは、ページの読み込みに変更イベントをトリガーすることを見て、私はあなたが変更ハンドラを持っていると仮定します。私は最終的に問題を中心としたことに気づいた部品に分解した後

$('input#w3934_txtQantity').before("<input type='button' value='-' class='qtyminus' field='w3934_txtQantity' />"); 
 
$('input#w3934_txtQantity').after("<input type='button' value='+' class='qtyplus' field='w3934_txtQantity' />"); 
 

 

 
$('.qtyplus').click(function(e){ 
 
    e.preventDefault(); 
 
    fieldName = $(this).attr('field'); 
 
    var currentVal = parseInt($('#w3934_txtQantity').val()); 
 
    if (!isNaN(currentVal)) { 
 
     $('#w3934_txtQantity').val(currentVal + 10); 
 
    } else { 
 
     $('#w3934_txtQantity').val(0); 
 
    } 
 
    $('#w3934_txtQantity').trigger('change'); // <---- 
 
}); 
 
$(".qtyminus").click(function(e) { 
 
    e.preventDefault(); 
 
    fieldName = $(this).attr('field'); 
 
    var currentVal = parseInt($('#w3934_txtQantity').val()); 
 
    if (!isNaN(currentVal) && currentVal > 0) { 
 
     $('#w3934_txtQantity').val(currentVal - 10); 
 
    } else { 
 
     $('#w3934_txtQantity').val(0); 
 
    } 
 
    $('#w3934_txtQantity').trigger('change'); // <---- 
 
}); 
 

 
// The change handler which I suppose you already have: 
 
$('#w3934_txtQantity').change(function() { 
 
    $('#w3934_txtSubTotal').val('$' + 
 
     (($('#w3934_txtQantity').val().replace(/\$/, '') * 
 
      $('#w3934_txtUnitPrice').val().replace(/\$/, '') + 
 
      +$('#w3934_txtAddlCharges').val().replace(/\$/, '') + 
 
      +$('#w3934_txtShip').val().replace(/\$/, '') 
 
     ) || 0).toFixed(2) 
 
    ); 
 
}); 
 
    
 
$('#w3934_txtQantity').trigger('change');

input { 
 
    width: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table cellspacing="0" border="0" style="width:100%;height:100%;padding-top:5px;"> 
 
<table> 
 
<tr> 
 
<td valign="bottom"><span id="w3934_lblQuantity" style="white-space:nowrap;">Quantity</span></td><td valign="bottom"><span id="w3934_lblUnitPrice" style="white-space:nowrap;">Unit Price</span></td> 
 
<td><span id="w3934_lblAddlCharges" style="display:inline-block;width:110px;">Setup</span></td> 
 
<td valign="bottom"><span id="w3934_lblShip">Shipping</span></td><td valign="bottom" style="text-align:right;"><span id="w3934_lblSubTotal" style="white-space:nowrap;">Subtotal</span></td></tr> 
 
<tr> 
 
<td class="SubTotalLine"><input name="w3934$txtQantity" type="text" value="170" id="w3934_txtQantity" class="medText formField" style="text-align:right;" /></td> 
 
<td class="SubTotalLine"><input name="w3934$txtUnitPrice" type="text" value="$2.00" readonly="readonly" id="w3934_txtUnitPrice" class="medText formField DisplayTextBox" style="margin-top:5px;text-align:center;" /></td> 
 
<td class="SubTotalLine"><input name="w3934$txtAddlCharges" type="text" value="$55.00" readonly="readonly" id="w3934_txtAddlCharges" class="medText formField DisplayTextBox" style="margin-top:5px;text-align:center;" /></td> 
 
<td class="SubTotalLine"><input name="w3934$txtShip" type="text" readonly="readonly" id="w3934_txtShip" class="medText formField DisplayTextBox" style="margin-top:5px;text-align:center;" /></td> 
 
<td class="SubTotalLine" align="right"><input name="w3934$txtSubTotal" type="text" value="$395.00" readonly="readonly" id="w3934_txtSubTotal" class="medText formField DisplayTextBox" style="margin-top:5px;" /></td> 
 
</tr> 
 
</table>

Answer 2

：その後、溶液は、ちょうどすべての+/-ボタンをクリックするだけでそのハンドラを呼び出すことです。うまくいけば、これは他の誰かを助け

$('#w3934_txtQantity').val(currentVal - 10).trigger("input"); 

：

var $input = $("#w3934_txtQantity"); 

$input.on('input', function() { 
$input.blur(); 
}); 

そして後の値の入力が適切なボタンをクリックすることにより、増加または減少したことをトリガー：私は、入力ボックスからフォーカスを削除入力イベントを追加しました。下の作業コード。

$('input#w3934_txtQantity').before("<input type='button' value='-' class='qtyminus' field='w3934_txtQantity' />"); 
 
$('input#w3934_txtQantity').after("<input type='button' value='+' class='qtyplus' field='w3934_txtQantity' />"); 
 

 
var $input = $("#w3934_txtQantity"); 
 

 
$input.on('input', function() { 
 
    $input.blur(); 
 
}); 
 

 
$(document).on('click', '.qtyplus', function(e) { 
 
     // Stop acting like a button 
 
     e.preventDefault(); 
 
     // Get its current value 
 
     var currentVal = parseInt($('#w3934_txtQantity').val()); 
 
     // If is not undefined 
 
     if (!isNaN(currentVal)) { 
 
      // Increment 
 
      $('#w3934_txtQantity').val(currentVal + 10).trigger("input"); 
 
      } else { 
 
      // Otherwise put min quantity there 
 
      $('#w3934_txtQantity').val(0); 
 
     } 
 
     
 
    }); 
 
    $(document).on('click', '.qtyminus', function(e) { 
 
     // Stop acting like a button 
 
     e.preventDefault(); 
 
     // Get its current value 
 
     var currentVal = parseInt($('#w3934_txtQantity').val()); 
 
     // If it isn't undefined or its greater than 0 
 
     if (!isNaN(currentVal) && currentVal > 0) { 
 
      // Decrement one 
 
     $('#w3934_txtQantity').val(currentVal - 10).trigger("input"); 
 
     } else { 
 
      // Otherwise put min quantity there 
 
      $('#w3934_txtQantity').val(0); 
 
     } 
 
\t \t \t \t 
 
    });

input { 
 
    width: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
<td valign="bottom"><span id="w3934_lblQuantity" style="white-space:nowrap;">Quantity</span></td><td valign="bottom"><span id="w3934_lblUnitPrice" style="white-space:nowrap;">Unit Price</span></td> 
 
<td><span id="w3934_lblAddlCharges" style="display:inline-block;width:110px;">Setup</span></td> 
 
<td valign="bottom"><span id="w3934_lblShip">Shipping</span></td><td valign="bottom" style="text-align:right;"><span id="w3934_lblSubTotal" style="white-space:nowrap;">Subtotal</span></td></tr> 
 
<tr> 
 
<td class="SubTotalLine"><input name="w3934$txtQantity" type="text" value="170" id="w3934_txtQantity" class="medText formField" style="text-align:right;" /></td> 
 
<td class="SubTotalLine"><input name="w3934$txtUnitPrice" type="text" value="$2.00" readonly="readonly" id="w3934_txtUnitPrice" class="medText formField DisplayTextBox" style="margin-top:5px;text-align:center;" /></td> 
 
<td class="SubTotalLine"><input name="w3934$txtAddlCharges" type="text" value="$55.00" readonly="readonly" id="w3934_txtAddlCharges" class="medText formField DisplayTextBox" style="margin-top:5px;text-align:center;" /></td> 
 
<td class="SubTotalLine"><input name="w3934$txtShip" type="text" readonly="readonly" id="w3934_txtShip" class="medText formField DisplayTextBox" style="margin-top:5px;text-align:center;" /></td> 
 
<td class="SubTotalLine" align="right"><input name="w3934$txtSubTotal" type="text" value="$395.00" readonly="readonly" id="w3934_txtSubTotal" class="medText formField DisplayTextBox" style="margin-top:5px;" /></td> 
 
</tr> 
 
</table>