jQuery input event binding

Question

Please check: http://jsfiddle.net/ds0jd6gg/

I am trying to implement a "quantity" textbox in a shopping cart, in which when user presses up/down arrows the number is incremented/decremented, and when user presses enter or a quantity box changes i want to implement an ajax request to send the new quantity to backend.

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

When I try this out, the value in quantity box is incremented/decremented correctly, but the "change" event is not fired when I change the qty and press enter/blur from the textbox. Can anybody explain what I'm missing here?

umm yeah comment that sentence, i haven't included that part of the code. But does it fire the change event when you press enter key? — Ananth
– Ananth, Commented Nov 4, 2014 at 1:32

james emanon · Accepted Answer · 2014-11-04 01:43:13Z

1

I just added this, and it worked: Add a trigger for the "change" event for your capture of the "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();

of course, this is for the "enter" key, you add this trigger whenever you want to call this event.

On why it isn't working for you, could be the preventing of the bubbling with your e.preventDefault's.

Event order of blur and change

Of interest: http://www.nczonline.net/blog/2007/02/06/event-order-of-blur-and-change/

edited Nov 4, 2014 at 1:43

answered Nov 4, 2014 at 1:32

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ananth Over a year ago

Okay, I will try now if that works. But why is it that the change event doesn't fire? Can you explain?

Ananth Over a year ago

Yeah I think you're right - in the keydown event i fire blur() and then preventDefault() so maybe the change() event is written to be fired after keydown is complete and the preventDefault() might be messing with it.. thanks

mainstreetmark · Accepted Answer · 2014-11-04 01:34:03Z

0

Using val() to set the value of a field does not automatically trigger a change, as a user didn't do the changing. So, add a trigger yourself:

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

answered Nov 4, 2014 at 1:34

mainstreetmark

6934 silver badges13 bronze badges

2 Comments

Ananth Over a year ago

I'm sorry that's not at all what I wanted -_- I wanted the change() to fire when enter key pressed, not for every up/down keypress

mainstreetmark Over a year ago

then put the trigger in the ==13 condition.

Collectives™ on Stack Overflow

jQuery input event binding

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related