Question

I have found that the following behavior in Chrome, not in Firefox.

I have an input element, which

• has "change" event handler
• has "keydown" event handler, in which when user types backspace and the element content is none, then that element is removed.
• and those two handlers are bound to some wrapper element, and the event handlers are attached using jQuery.on function, as a delegated handlers.

In Chrome, If I

1. click input box, type some text in input box, and focus out.

• change event handler is called.

2. click input box, type backspace(s) to remove all the contents, and type once more to remove that input box.

• then, change event handler is still called though the target input DOM is removed!

In Firefox, when the box is removed due to backspace keydown, the change event handler is not called..

Is is only in my browsers? or jQuery bug? or browser implementation bugs?

I wrote the simplified code in jsfiddle..
http://jsfiddle.net/RbAua/6/

Answer 1

If you use bind() on change event it works as expected,

seems bug related to on() method, that why i not understand why last time all use .on() even for single element!

    http://jsfiddle.net/RbAua/9/

$('#wrap').on('keydown','#input',function(event){
    if(event.keyCode == 8){ // backspace
        if($(this).val().length == 0){
            $(this).remove();
            $('#txt').append('<div> removed! </div>');
            event.preventDefault();
        }
    }
});


$('#wrap #input').bind('change', function(){
    $('#txt').append('<div> changed! to [' + $(this).val() + '] </div>');
});

debugging jquery, i have found that if event has been applied with on() or live(), then element not have a cached event data, so CleanData() not works as expected, in this case more strange that FF works as expected out of the box.

i found workaround for this, idea is to bind only to visible elements, so making
hide() before remove will prevent change fire.

var onchange = function(e) {
    $('#txt').append('<div> changed! to [' + $(this).val() + '] </div>');
};

$('#wrap').on('keydown', '#input', function(event) {
    if (event.keyCode == 8) { // backspace
        if ($(this).val().length === 0) {
            var that = $(this);

            var onchange1 = onchange;
            that.hide();
            that.remove();
            $('#txt').append('<div> removed! </div>');
            event.preventDefault();
        }
    }
});



$('#wrap').on('change', '#input:visible', onchange);​

http://jsfiddle.net/RbAua/12/