Change and blur events of input field are not fired

Question

At least IE9 and IE10 have strange behaviour.

I have four input fields and subscribe on their change events. I have logic which disables first input field inside the change event handler of it.

So case:
I enter some value in the first input field, then I click to the second input field. As result change event handler of the first input is fired. So my cursor is inside the second input field and i enter there some value. After that I click on the third input field. So, the expected behaviour is that change event handler of the second input field is fired, BUT NOT, it's not fired.

So now cursor is inside third input field, I enter there value and click on the fourth field. As result the change event handler of the third field is fired.

Conclusion. This behaviour I reproduced only in IE9 -IE10. Didn't tested in IE8. In Chrome change handler of each input field is fired. So probably someone had such situation?

Is there bug in IE?

Here is the link to the jsfiddle

HTML

<div id="content">
    <div>
        <label>First field</label>
        <input type="text"  id="one" tabindex="1" />
    </div>
    <div>
        <label>Second field</label>
        <input type="text"  id="two" tabindex="2" />
    </div>
    <div>
        <label>Thitd field</label>
        <input type="text"  id="three" tabindex="3" />
    </div>
    <div>
    <label>Fourth field</label>
        <input type="text"  id="four" tabindex="3" />
    </div>
    <div id="result">
    </div>
</div>

JavaScript

$('input').on('blur', function (evt) {
 var $input = $(evt.target);
    var msg = '<div style="color:red;">' + $input.prop('id') + ' field blur event fired. Value is: ' +     $input.val() + '</div>';    
    addMsgToResult(msg);
});

$('#one').on('change', function (evt) {
     var $input = $(evt.target);
   addChangeEventMessage($input);
    $input.prop('disabled', true);
});

$('#two, #three, #four').on('change', function (evt) {
    var $input = $(evt.target);
   addChangeEventMessage($input);
});

function addChangeEventMessage($input){
    var msg = '<div style="color:blue;">' +$input.prop('id') + ' field change event fired. Value is: ' + $input.val()+ '</div>';
    addMsgToResult(msg);
}

function addMsgToResult(msg){
    $('#result').append(msg);
    console.log(msg);
}

Answer 1

Yeah, that’s strange.

But encapsulating the disabling of the first input field into a small timeout like this seems to “fix” the problem:

setTimeout(function() { $input.prop('disabled', true); }, 1);

http://jsfiddle.net/45fcF/56/