오늘의 골때리는 js 현상: alert 창을 닫아도 클릭 이벤트가 계속 trigger되어 alert가 무한히 나옴

텍스트박스에서 엔터를 치면 자동으로 입력되게 하려고 keyup 이벤트 핸들러를 등록했다.

잘 동작하는 듯했는데  alert창을 닫아도 닫아도 계속 열리는 것이다.

크롬이어서 다행이지 IE였으면 무한히 열렸을 거야...스페이스바로 눌러보길 잘했지*

$('<input/>', { type: "text", id: "myInput" })

.appendTo(myForm)

.keyup(function (event) {

if (event.keyCode == 13) {  // 13=ENTER

// $(this).blur();

$("#myButton").click();

} 

});

$('<button/>', { type: "button", text: "입력", id: "myButton" })

                .appendTo(myForm)

                .click(myButton_Click);

function myButton_Click() {

   alert("이거 무한 반복됨");

}

해결책: 저 코드의 주석을 해제하여 $(this).blur()로 포커스를 강제 해제하면 된다. alert 창이 닫힌 후 focus가 돌아오지 않는다는 게 문제지만 그건 나중에 해결하고.

아무튼 javascript는 콜백함수에서 입력한 게 콜백함수를 호출한 쪽에도 영향을 미치는 병맛나는신박한 언어다. 아니, jQuery의 문제인가? 뭔가 event.preventDefault() 같은 게 있는 거 같은데 해도 안 되고 그건 나중에 알아보기로.

*사실은 ok 버튼을 엔터키로 누를 때만 그렇다. 마우스로 클릭하거나 스페이스바로 확인하면 그러지 않는다(이벤트가 발생하지 않으므로 당연하다). 

VS 2010에서 jQuery Intellisense 쓰기

jQuery는 목적에 따라 몇 가지 버전의 파일들이 있는데, 그 중에 Visual Studio의
Intellisense를 지원하기 위해 만든 jquery-[version_number]-vsdoc.js가 있다.

(version 2.0.3이라면 jquery-2.0.3-vsdoc.js가 된다)

이것을 jQuery 사이트에서 받아서,

솔루션 디렉터리에 복사한 후
(여기부터 중요)

마우스로 끌어서 Intellisense를 쓰고 싶은 편집 창에 놓으면

다음과 같이 자동으로 ///로 시작하는 주석을 만들어준다. 그러면 그때부터 Intellisense를 쓸 수 있다.

처음 프로젝트를 만들 때부터
도구 -> 라이브러리 패키지 관리자 -> 솔루션용 NuGet 패키지 관리...

에서 jQuery를 설치해 두었으면 자동으로 되는 것이지만 그렇게 해 두지 않았다면

이렇게 파일 별로 수동으로 하는 방법도 있는 것이다.

캐시 때문에 망 (크롬 주의)

HTML을 여러 개로 쪼갠 뒤,

Javascript로 필요할 때만 부르게 코드를 짰다.

즉, 한 번이라도 필요하면 쪼개 놓은 HTML 조각을 읽어들이고 그것을 바탕으로 UI 요소(event handler 등)를 만들게 했다.

그리고 HTML 조각 내의 div 중 일부의 name/id를 바꿨다.
(Visual Studio의 리팩터링->이름 변경 같은 게 있으면 얼마나 좋을까!)

그랬더니 (크롬에서) jQuery가 이름을 못 찾는다. (undefined라니 그게 무슨 소리요!)

아무리 뜯어보아도 이상이 없어 IE10으로 실행했더니 된다.

아하 캐시 문제구나.

크롬으로 조각난 HTML (part.html)을 한 번 열어 새로고침 한 후, 원래의 페이지(index.html)를 여러 다시 실행하니 잘 된다.

index.html에서 돌아가는 javascript를 짤 때,

index.html이 아니라 part.html을 고쳤기 때문에 인식을 못한 것인가?

그러면 IE에서는 왜 잘 됐는가?