jQuery clone 메소드

얼마 전에 jquery api 문서를 참고하다가 우연히 clone 메서드를 봤는데

 

지금까지 몰랐던 clone의 새로운 속성을 알게 되었습니다.

 

clone 메소드를 사용할 때 파라미터로 true를 주게 되면

 

기존 템플릿에 이벤트가 있었다면 그대로 그 이벤트가 유지된다는 것입니다.

 

저 같은 경우 템플릿을 복사해서 데이터를 표출할 때

 

이벤트가 걸리지 않은 템플릿을 복사(clone)한 뒤 이벤트를 추가했는데

 

파라미터로 true를 넘기게 되면 

 

이벤트가 걸린 기존 템플릿에 이벤트를 추가하지 않고 그대로 사용할 수 있습니다.

 

================================================================

<true 사용 X>

---jsp

<div class="template">template</div>

 

---javaScript

function cloneTemplate(){

    var template = $(".template").clone();

    template.click(function(e){

        console.log("clicked~~");

    });

 

    $(body).append(template);

}

 

--------------------------------------------------------------------------------

 

<true 사용 O>

 ---jsp

<div class="template">template</div>

 

---javaScript

function setEvent(){

    $(".template").click(function(e){

        console.log("clicked~~");

    });

}

 

function cloneTemplate(){

    var template = $(".template").clone(true);    //true 파라미터 추가

    $(body).append(template);

}

================================================================

 

위의 예제를 보게 되면 큰 차이가 없습니다.

 

하지만 true 파라미터를 사용하지 않는다면

 

데이터를 읽어와서 표출하는 소스를 코딩할 때

 

표출하는 기능 외에 이벤트 추가 기능도 있어서 순수 표출로만 이루어지지 않은 소스가 생길 수 있습니다.

 

따라서 이벤트 추가와 표출하는 것을 따로 코딩하고 싶으신 분들은

 

파라미터로 true를 넘겨서 개발하시면 좋을 거 같습니다.

 

참고) https://api.jquery.com/clone/#clone-withDataAndEvents