1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery.js"></script> </head> <body> <div class="box"> 클릭해봐 </div> <button id="detach">때어내기</button> <button id="append">붙이기</button> <script> /* .detach() 메서드는 노드를 DOM에서 제거 하면서 캐싱한다. ( 캐싱될때 노드의 정보는 jQuery 데이터 형태로 이전에 등록되었던 이벤트, 정보들도 함께 캐싱된다.) DOM에서 제거했다가 추후에 다시 삽입하는 형태로 사용 가능하다. 캐싱된 노드를 다시 DOM에 삽입 후, 이벤트를 다시 등록해 줄 필요가 없다. CTRL + X , CTRL + V 의 개념 ???? .detach()된 노드는 제거하며 캐싱된 노드를 1번 append할수 있다. ( 여러번 append 할 수 없다. ) */ //최초 이벤트 등록 $('.box').click(function(event) { $(this).data({ num : 100, foo : "홍길동" }); console.log("클릭하셧네요."); console.log($(this).data()); }); var detachNode; // 캐싱된 노드를 저장 $("#detach").click(function(event) { var box = $('.box'); // 떼어내면 DOM에서 제거되기 때문에 .box를 찾을수 없게 된다. if(box.length) { // 박스가 존재할때만. detachNode = box.detach(); // 캐싱 - 떼어내기 CTRL + X } console.log(detachNode); }); // append후에 click해보자 최초에 등록한 이벤트가 살아있다. $("#append").click(function(event) { $("body").append($(detachNode)); // 붙이기 CTRL + V }); </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery, CSS] z-index position div 겹친 영역 이벤트 처리 (0) | 2016.07.25 |
|---|---|
| [jQuery] .index(this) - 선택된 요소의 index 얻기 (0) | 2016.04.12 |
| [jQuery] $.trim() - 문자열 앞 뒤 공백제거 (2) | 2016.03.09 |
| [jQuery] html5 data 속성 제어 - data() 메서드 활용 (0) | 2016.03.08 |
| [jQuery] $._data($("selecter")[0], 'events' ) - has a event 이벤트를 가지고 있는지 체크 (0) | 2016.03.07 |
