Question

我正在尝试在购物车中实现“数量”文本框，当用户按下向上/向下箭头时，数字会递增/递减，当用户按下回车或数量框更改时，我想实现ajax请求将新数量发送到后端。

$('.cart-qty').on('keydown', function (e) {
    var qty = parseInt($(this).val());
    if (e.keyCode == 38) { // up arrow
        $(this).val(++qty);
        e.preventDefault();
    } else if (e.keyCode == 40) { // down arrow
        if (qty <= 0) return;
        $(this).val(--qty);
        e.preventDefault();
    } else if (e.keyCode == 13) { // enter key
        $(this).blur(); // blur event focuses the pointer out of the textbox
        e.preventDefault();
    } else if ($.inArray(e.keyCode, [46, 8, 9, 27, 110, 190]) !== -1 ||
        (e.keyCode == 65 && e.ctrlKey === true) ||
        (e.keyCode >= 35 && e.keyCode <= 40)) { // got this from internet to allow home,bksp etc keys
        return;
    } else if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { // invalid key pressed in my context
        e.preventDefault();
    }
}).on('change', function () {
    var qty = parseInt($(this).val());
    $('.btn-place-order').find('span').html(qty); // just to check in jsfiddle

    var item_row = $(this).parents('.cart-row');
    item_row.find('.item-qty-count').html(qty); // updates hidden qty fields
    $cart.updateQty(item_row.attr('data-item-id'), qty); // implements ajax request
});

当我尝试这个时，数量框中的值正确递增/递减，但是当我更改数量并从文本框中按Enter / blur时，不会触发“更改”事件。任何人都可以解释我在这里缺少的东西吗？

Answer 1

我刚添加了这个，它起作用了：为＆＃34;更改＆＃34;添加触发器您捕获＆＃34;输入＆＃34; keyCode，13。

} else if (e.keyCode == 13) { // enter key
    $(this).blur(); // blur event focuses the pointer out of the textbox
    $(this).trigger('change');
    e.preventDefault();

当然，这是为了＃34;输入＆＃34;键，您可以在想要调用此事件时添加此触发器。

为什么它不适合你，可以防止你的e.preventDefault冒泡。

模糊和变化的事件顺序

感兴趣：http://www.nczonline.net/blog/2007/02/06/event-order-of-blur-and-change/

Answer 2

使用val()设置字段的值不会自动触发更改，因为用户没有进行更改。所以，自己添加一个触发器：

  $(this).val(++qty).trigger('change')

jQuery输入事件绑定

2 个答案: