Привязка события ввода jQuery

Question

Пожалуйста, проверьте: http://jsfiddle.net/ds0jd6gg/

Я пытаюсь реализовать текстовое поле "количество" в корзине, в котором, когда пользователь нажимает стрелки вверх / вниз, число увеличивается / уменьшается, а когда пользователь нажимает клавишу ввода или изменяется поле количества, я хочу реализовать 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
});

Когда я это пробую, значение в поле количества увеличивается / уменьшается должным образом, но событие "изменение" не запускается, когда я изменяю количество и нажимаю ввод / размытие из текстового поля. Кто-нибудь может объяснить, что мне здесь не хватает?

Answer 1

Я только добавил это, и это сработало: добавьте триггер для события "change" для захвата "enter" 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();

конечно, это для клавиши "ввод", вы добавляете этот триггер всякий раз, когда хотите вызвать это событие.

То, почему это не работает для вас, может быть предотвращением пузырей с вашими e.preventDefault.

Порядок событий размытия и изменения

Интересно: http://www.nczonline.net/blog/2007/02/06/event-order-of-blur-and-change/

Answer 2

С помощью val() установка значения поля не приводит к автоматическому изменению, так как пользователь не сделал изменения. Итак, добавьте триггер самостоятельно:

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