jQuery增量按钮更新输入值，但不会更新价格变化

时间：2017-08-15 13:47:49

标签： jquery html

我添加了一个加号＆amp;我输入数量前后的减号按钮和工作方式，问题是当数量更新时，它不会更新价格/总数，除非我点击然后退出输入框。如何在不需要单击输入框的情况下获取更新数量？系统已经有代码，当数量发生变化时会更新价格，但是当我使用加号或减号按钮时，只有在我点击框后才会读取更改的值。

＆＃13;
＆＃13; 
$('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);
        }
		
    });
    
$('#w3934_txtQantity').trigger('change');
＆＃13; 
input {
  width: 40px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您没有添加用于更新总计的代码，但是看到您在页面加载时触发更改事件，我假设您有一个更改处理程序。然后解决方案是在每次+/-按钮点击时调用该处理程序：

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

答案 1 :(得分：0)

在将其分解为部分之后，我终于意识到问题在于焦点。我添加了一个输入事件，它从输入框中删除了焦点：

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

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

点击相应按钮后，在值增加或减少后触发输入：

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

希望这有助于其他人。下面的工作代码。

＆＃13;
＆＃13; 
$('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);
        }
				
    });
＆＃13; 
input {
  width: 40px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题