jQuery遞增按鈕更新輸入值，但未更新價格變化

我在數量和工作量的輸入前面和後面加上減號按鈕&，問題是當數量得到更新時，它不更新價格/總價，除非我點擊進入，然後退出輸入框。如何在無需點擊輸入框的情況下獲取數量更新？系統已經有代碼，當數量改變時會更新價格，但是當我使用加號或減號按鈕時，只有在單擊框後，它纔會讀取正在更改的值。jQuery遞增按鈕更新輸入值，但未更新價格變化

$('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>

來源

2017-08-15 Liza Kline

您沒有添加更新總的任何代碼。 – trincot

這就是'變化'所做的，當變化發生時，即焦點離開時，它會發生。如果你想要「實時」更新，你可以用'input'來替換'change' – adeneo

@adeneo你是什麼意思「實時」更新？ –

你不總在更新，但看到你觸發頁面加載改變事件中添加代碼，我假設你有一個變化處理程序。然後將溶液只是調用該處理程序在每一個+/-按鈕點擊：

$('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>

來源

2017-08-15 14:11:13 trincot

所以，如果我的單價是靜態的，但單價會根據數量而變化，那就行了。我需要一種數量更新方式，無需在使用加號或減號按鈕後點擊進入方框。 –

分解成零部件後，我終於明白了，問題爲重點。我補充說，從輸入框中刪除焦點的輸入事件：

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

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

，並引發該值後，輸入被點擊相應的按鈕，增加或減少：

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

希望這可以幫助其他人。工作代碼如下。

$('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>

來源

2017-08-16 15:03:14

jQuery遞增按鈕更新輸入值，但未更新價格變化

回答

相關問題