少なくとも IE9 と IE10 は奇妙な動作をします。
4 つの入力フィールドがあり、それらの変更イベントをサブスクライブします。その変更イベントハンドラー内の最初の入力フィールドを無効にするロジックがあります。ケース: 最初の入力フィールドに値を入力してから、2 番目の入力フィールドをクリックします。結果として、最初の入力の変更イベント ハンドラーが起動されます。したがって、カーソルは2番目の入力フィールド内にあり、そこに値を入力します。その後、3 番目の入力フィールドをクリックします。したがって、期待される動作は、2 番目の入力フィールドの変更イベント hadler が発生することですが、発生しません。 カーソルが 3 番目の入力フィールド内にあるので、そこに値を入力して 4 番目のフィールドをクリックします。その結果、3 番目のフィールドの change イベント hadler が発生します。
結論。この動作はIE9～IE10でのみ再現しました。IE8 ではテストされていません。Chrome では、各入力フィールドの変更ハンドラが起動されます。それで、おそらく誰かがそのような状況にあったのでしょうか？IEにバグはありますか？
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);
}