JQuery 에서 동적 이벤트를 사용 하던중..

지금도 계속 쓰지만 동적 이벤트를 줄때가 많다.
클릭 이라던가 Click 이라던가.. click 같은녀석 말이다. 아직도 JQuery는 신비한 영역이지만... 다음과 같은 코드를 짠 적이 있었다.

$("#_master_list > tr").each(function(){
 $(this).click(function(){
  $("#_detail_list > tr").remove();

  // 이곳에 [하위 리스트 가져오는 코드] 삽입

  $("#_detail_list").append(HTML);

  $("#_detail_list > tr").each(function(){
   $(this).click(function(){
   
   // 이곳에 [하위 이벤트 처리 루틴] 을 삽입
   
   });
  });
 });
});

그런데... IE 에서만 되네?!
한동안 삽질하다가 [하위 리스트 가져오는 코드]에서 뿌려지는 HTML 코드에 onclick을 직접 부여했더니, IE, FF, CH에서도 잘 되었다.
해결!

PS> _master_list 및 _detail_list 는 tbody의 id 이다.
PS> 실제 구성했던 코드와는 상당히 다르다.

$("검색식").each() : 검색식 또는 대상에서 탐색된 대상들 전체에 대한 반복 동작을 1회수행한다.
$("검색식").click() : 마우스 클릭 이벤트를 부여한다. onclick='' 과 동일.
$("검색식").remove() : 검색식에서 탐색된 대상을 지운다.
$("검색식").append() : 검색식에서 탐색된 대상에 인자로 지정된 내용을 추가한다.

- 검색식에서 # 기호는 객체의 ID 값을 비교한다는 의미이다.
- 검색식에서 > 기호는 대상의 바로 한단계 아래의 자식 노드를 탐색한다는 의미이다. 단계에 상관없이 자식노드를 탐색 할때는 .find()를 이용한다.
- 검색식에서 아무런 식별기호 없이 이름을 기술하면, 태그명을 의미하게 된다.
그러므로..
$("#_detail_list > tr").each(...) 는... "id가 _detail_list인 객체의 한단계 아래 자식노드인 tr 태그를 모두 찾아서 each안에 기술된 기능을 수행한다." 이다.

추가

포스트 다시 보다 느낀 거지만... 사실 이렇게 쓰면 된다.

$("#_master_list tr").on("click", function(){
  // 이곳에 [하위 리스트 가져오는 코드] 삽입
});

$("#_detail_list tr").on("click", function(){
  // 이곳에 [하위 이벤트 처리 루틴] 을 삽입
});