jquery 의 ready 로 change 이벤트 설정시 IE 에서 오동작 하는 경우

요즘 jquery 가 대세인듯 하다. js 프레임웍의 편리함을 한번 맛보면 벗어날 수 없다.

우선 결론을 말하면 "IE 야! 제발 쫌" 버그라고 말해야 겠다.
다양하게 확인을 하지는 않았지만, IE9 는 제대로 동작을 하는 듯 하다.
IE8 포함 이전버전에서는 오동작을 한다.
jquery 새버전에서는 될지도 모르겠다. jquery 테스트 버전은 1.4.2 이다.

보통 이런식으로 처리한다.

<input type=text name='phone' onchange='check_phone_number();'>

  
jquery 에서 이런식으로 처리할 수 있다. html 과 js 코드를 분리하기 위해 자주 사용하게 된다.

$(document).ready(function(){
  $('input[name=phone]').change(function(){
     check_phone_number();
  });
}); 

그런데, 저렇게 처리하면 IE 에서 이상하게 동작한다는 것을 느낄 것이다.
text 입력창에 값을 입력하고 out focus 되면 onchange 이벤트가 발생해야 하는데, 발생하지 않는다.
input 태그에 직접 onchange 를 쓴경우 정상적으로 발생하는데, jquery 의 ready 를 사용하면 안된다.
한번 focus 되고 나서, 다시 해볼때는 정상적으로 된다.

오! IE 야 제발.

이를 해결하기 위해 일부러 focus 이벤트를 발생해 주어야 한다.

다음처럼 추가해준다.(ready 안에)

if( $.browser.msie ) {
  $('input:text').click(function(){
    this.blur();
    this.focus();
  });
}

IE 브라우저인 경우 click 시 blur , focus 이벤트를 발생시켜준다.
그러면 바로 change 이벤트가 같이 발생하여 정상적으로 보인다.

더 좋은 방법이 있는지 모르겠지만, 이와 같이 해결했다.