jquery에는 selector에 의해 선택된 항목에 원하는 내용을 추가하는게 가능합니다.
지원하는 함수는 다음 네 가지가 존재 합니다.
- append() : 선택된 엘리먼트(elements)의 맨 뒤에 추가하기
- prepend() : 선택된 엘리먼트(elements)의 맨 앞에 추가하기
- after() : 선택된 엘리먼트(elements)의 바로 뒤에 추가하기
- before() : 선택된 엘리먼트(elements)의 바로 앞에 추가하기
이 함수들을 사용하면 html 태그 값을 추가하는게 가능합니다.
추천은 저를 춤추게 합니다 ^^
아래 예제를 봅시다.
이런 코드를 실행하게 되면 테이블의 값을 클릭할 때 마다 클릭한 행의 바로 아래 'appended row'라는 이름의 행이 하나 추가됩니다.
위의 그림처럼 '2'를 클릭하면 바로 아래 'appeded row'라는 행이 하나 추가되죠.
그런데, 'appended row'를 클릭하면 아무런 변화가 없습니다.
이렇게 동작하기를 기대했다면 더 고민할 필요가 없습니다.
하지만, 새로 추가된 행에 대해서도 클릭하면 동일한 동작(바로 아래 'appended row'라는 행이 추가)이 수행되기를 기대했다면 추가적인 작업이 필요합니다.
왜냐하면 동적으로 새롭게 추가된 컨텐츠에 대한 마우스 액션이 등록되어 있지 않기 때문에 아무런 마우스 이벤트가 발생해도 이를 인식하지 못하기 때문입니다.
그럼 이벤트 핸들러를 등록해 봅시다.
이렇게 append()로 태그 값을 추가한 후에 태그값에 대해서 이벤트값(마우스 클릭 액션)을 등록하면 됩니다.
좀전과 동일하게 '2'를 클릭하고, 추가된 'appended row'를 클릭해봅시다.
이번에는 'appending'이라는 새로운 행이 추가되는것을 확인 할 수 있습니다.
이제 동적으로 추가한 태그 값에 대해서도 원하는 이벤트를 등록해서 사용하세요~
'IT 생활 > 프로그래밍' 카테고리의 다른 글
| 젠킨스(Jenkins) /허드슨(hudson) 활용 팁 - 소스 코드 커버리지(Code Coverage) 플러그인 (3) | 2013.12.19 |
|---|---|
| [Ajax-JQuery] 입력값에 대한 결과 실시간 처리 하기 - 장고(Django)환경에서 JQuery와 Ajax 사용 (1) | 2013.12.05 |
| [Python /파이썬] 이미지 파일에서 문자열 추출하기 - pytesser 라이브러리 사용해서 captcha 우회 하기 (2) | 2013.09.09 |
| [웹개발/ JQuery] 마우스오버(mouseover)시 툴팁(tooltip) 보여주는 기능 (1) | 2013.07.25 |
| [프로그래밍] clang(정적 소스 분석기)과 결과 분석을 위한 scan-build/scan-view 툴 (0) | 2013.05.29 |
