按钮更改输入时的警报文本[重复]

Posted 2023-02-22

【中文标题】按钮更改输入时的警报文本[重复]

【英文标题】：Alert Text When Input is Changed by Button [duplicate]

【发布时间】：2018-01-24 16:03:06

【问题描述】：

我需要在输入框中添加加号/减号按钮，然后在使用 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' />");

 $(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);
        
				);

<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>

【参考方案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>