Filter 'onchange' 'onkeypress'

Question

Is there a way how to handle only one of these events if both of them fired? If I change value and press key I end up rebinding grid twice because events arrive in sequentially. I understand that what I am getting is correct behaviour and I am getting what I asked for, but I need a way how to stop the second event from propagation. I am looking for solution at the event level (not isGridBinded flag).

$(op.$txtBox).on('change keypress', function (e) {
        if ((e.keyCode == 13 && e.type == 'keypress')  || e.type == 'change') {
            localWidget._rebindGrid();
        }
    });

http://stackoverflow.com/questions/2363360/javascript-fires-two-events-onkeypress-and-onclick similar issue - no answer. — Vojtiik, Jul 01 '13 at 11:33
@BrokenHeartღ your link is relative to delegation, here OP doesn't delegate events — A. Wolff, Jul 01 '13 at 11:44
you have a mistake in your fiddle the if statement should also check for keyup if you handling keyup. if you change the keyup back to keypress, run it and then type in value, loose focus from the field then type in other value and press enter you will get two logs. — Vojtiik, Jul 01 '13 at 11:45
@BrokenHeartღ Here OP is using .on() syntax relative/equivalent to bind, not to delegate/live. Again, this is not OP's issue here. — A. Wolff, Jul 01 '13 at 11:47

score 1 · Accepted Answer · answered Jul 01 '13 at 11:57

1

Use keyup event instead.

Otherwise, the only way i can think is to throttle it using a timeout:

DEMO

(function () {
    var timeout;
    $('input').on('change keypress', function (e) {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            if ((e.keyCode == 13 && e.type == 'keypress') || e.type == 'change') {
                console.log(1);
            }
        }, 0);
    });
})();

answered Jul 01 '13 at 11:57

A. Wolff

74,033
9
94
155

Thanks a lot the keyup did the trick, the timeout solution would get me around the issue as well. Interesting that these two events behaves differently, I will read up on it a little – Vojtiik Jul 01 '13 at 12:30
Further more here is the best solution : http://stackoverflow.com/questions/8608145/jquery-on-method-with-multiple-event-handlers-to-one-selector - http://api.jquery.com/on/#on-events-selector-data – Vojtiik Jul 01 '13 at 13:03

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

Use the events like that:

$(op.$txtBox).on({
    change: function(){
          localWidget._rebindGrid();
     },
     keypress: function(e){
         if(e.keyCode == 13)
            localWidget._rebindGrid();
     },
});

Reference: JQuery .on() method with multiple event handlers to one selector

OR you can use the bind() function of jQUery.

edited May 23 '17 at 10:32

Community

1
1

answered Jul 01 '13 at 11:40

Code Lღver

15,573
16
56
75

what this would change to OP's issue? – A. Wolff Jul 01 '13 at 11:41
@roasted I am updating the code. – Code Lღver Jul 01 '13 at 11:41
@roasted its working try with change the console.log with alert. – Code Lღver Jul 01 '13 at 11:59
Sorry but for debugging you need to use console not alert. Alert change some browser's behaviour specially for events. BTW, here, this still alert twice if you type something in the input (onchange get fired if input value change, not if still the same) http://jsfiddle.net/rEwML/ – A. Wolff Jul 01 '13 at 12:01

Filter 'onchange' 'onkeypress'

2 Answers2