按钮

Question

我需要在输入框中添加加/减按钮，然后在使用jQuery更改数量时生成一条消息。我已经让按钮工作了（他们改变了数字），但我的警报并没有开火。我很难过。

＆＃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' />");

 $(document).on( 'input', '#w3934_txtQantity', function() {
        	alert("Change!");
         });


$(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);
            } else {
            // Otherwise put min quantity there
           $('#w3934_txtQantity').val(0);
        }
       
    });
    // This button will decrement the value till 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);
        } else {
            // Otherwise put min quantity there
            $('#w3934_txtQantity').val(0);
        }
				});

＆＃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></tr>
<tr><td class="SubTotalLine"><input type="text" value="170" id="w3934_txtQantity" style="text-align:right;" /></td></tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是因为以编程方式更改输入值时不会引发任何事件。相反，您可以手动trigger()一个。

另请注意，您可以通过提供修改当前数字的val()函数来整理递增/递减值的逻辑，还可以使用类型强制将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" />');

$(document).on('input', '#w3934_txtQantity', function() {
  console.log("Change!");
}).on('click', '.qtyplus', function(e) {
  e.preventDefault();
  $('#w3934_txtQantity').val(function(i, v) {
    return (parseInt(v) + 10) || 0;
  }).trigger('input');
}).on('click', '.qtyminus', function(e) {
  e.preventDefault();
  $('#w3934_txtQantity').val(function(i, v) {
    return (parseInt(v) - 10) || 0;
  }).trigger('input');
});

<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>
  </tr>
  <tr>
    <td class="SubTotalLine"><input type="text" value="170" id="w3934_txtQantity" style="text-align:right;" /></td>
  </tr>
</table>

另外，您可以在inc / dec按钮上使用data属性，以便您的代码可以完全干净：

$('input#w3934_txtQantity')
  .before('<input type="button" value="-" class="amend" data-amendment="-10" data-field="w3934_txtQantity" />')
  .after('<input type="button" value="+" class="amend" data-amendment="10" data-field="w3934_txtQantity" />');

$(document).on('input', '#w3934_txtQantity', function() {
  console.log("Change!");
}).on('click', '.amend', function(e) {
  e.preventDefault();
  var amendment = $(this).data('amendment');
  var id = $(this).data('field');
  $('#' + id).val(function(i, v) {
    return (parseInt(v) + amendment) || 0;
  }).trigger('input');
});

<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>
  </tr>
  <tr>
    <td class="SubTotalLine"><input type="text" value="170" id="w3934_txtQantity" style="text-align:right;" /></td>
  </tr>
</table>