javascript - 当输入的值更改时，不会触发 Onchange 事件

Question

我单击加号按钮输入值发生变化，但 AJAX 不会触发。仅当我手动键入输入值时，AJAX 才会触发。

如何才能让 AJAX 在单击加号/减号按钮时触发？

<div class="eita">
    <h1>Quantidade:&nbsp;&nbsp;
        <button type="button" class="ui circular button" id="menos"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-5 -15 39 39">
                <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-12v-2h12v2z" />
            </svg></button>
        <div class="ui mini icon input focus">
            <input class="itemQty" value="<?= $row['qty'] ?>" type="text" style="padding-right: 8px; padding-left: 12px; width: 34px;" maxlength="1" disabled="">
            <input type="hidden" class="pid" value="<?= $row['id'] ?>">
            <input type="hidden" class="pprice" value="<?= $row['product_price'] ?>">
        </div>
        <button type="button" class="ui circular button" id="mais"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-5 -15 39 39">
                <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" />
            </svg></button>
    </h1>
    <div class="price">
        <span>R$ 79.90</span><span>R$ <?= number_format($row['product_price'], 2) ?></span>
    </div>
</div>
<script>
    //on.change event.
    $(function() {
        $('#mais').on('click', function() {
            var $quantidade = $(this).closest('h1').find('.itemQty');
            var currentVal = parseInt($quantidade.val());
            if (!isNaN(currentVal)) {
                $quantidade.val(currentVal + 1);
            }
        });
        $('#menos').on('click', function() {
            var $quantidade = $(this).closest('h1').find('.itemQty');
            var currentVal = parseInt($quantidade.val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $quantidade.val(currentVal - 1);
            }
        });
    });
</script>

<script>
    //ajax.
    $(document).ready(function() {

        $(".itemQty").on('change', function() {
            var $el = $(this).closest('div');

            var pid = $el.find(".pid").val();
            var pprice = $el.find(".pprice").val();
            var qty = $el.find(".itemQty").val();
            console.log(qty);

            $.ajax({
                url: 'action.php',
                method: 'post',
                cache: false,
                data: {
                    qty: qty,
                    pid: pid,
                    pprice: pprice,
                },
                success: function(response) {
                    console.log(response);
                }
            });
        });

        load_cart_item_number();

        function load_cart_item_number() {
            $.ajax({
                url: 'action.php',
                method: 'get',
                data: {
                    cartItem: "cart-item"
                },
                success: function(response) {
                    $('.cart-item').html(response);
                }
            });
        }
    });
</script>

Answer 1

您需要手动触发事件或直接调用更改监听器使用的相同代码

触发

$quantidade.val(currentVal + 1);
$(".itemQty").trigger('change');

直接调用相同的代码

function sendUpdate(){
  /* code from change listener moved here */
}

$(".itemQty").on('change',sendUpdate);

//in button click events
quantidade.val(currentVal + 1);
sendUpate();