jquery에서 load 함수 쓰는방법 - html include

카군입니다.

개발 포스팅은 정말 오랜만이네요 ... 뭘 한건지 ...

갑자기 포스팅을 하는 이유는 html 페이지 를 메뉴별 include 하다가 대상페이지에 스크립트와 메인 페이지에 스크립트가

이상하게 꼬이는 현상이 종종 별견되어서 사용한 후로 줄곧 사용하고 있는 ;; 머라는거지 ;

저는 이미 한번 써보았습니다. 나중엔 관리가 좀 힘들긴 하더군요

제 방식으로 접근해 보겠습니다. 구글.... 구글에 jquery load 를 검색합니다.

딱 두개만 보죠

상위 3개에 링크된 문서를 봐야겠네요... 자료를 굉장히 많은가 봅니다.

오... 맨위에 링크는 제이쿼리 홈페이지로 연결 되네요

.load( url [, data ] [, complete ] )

• url
  Type: String
  A string containing the URL to which the request is sent.
• data
  Type: PlainObject or String
  A plain object or string that is sent to the server with the request.
• complete
  Type: Function( String responseText, String textStatus, jqXHR jqXHR )
  A callback function that is executed when the request completes.

로드 함수 인자는 뭐 기본 url 만있어도 되는가 봅니다.

[] 안에는 있어도 되고 없어도 된다는 뜻입니다. 선택사항이라는 얘기죠

그래도 선택 사항을 알아보면... 데이터와.... 콜백함수 같은 거라고 하네요 

즉, url과 그다음에 파라미터데이터, 콜백함수 이런식입니다.

$("#result").load("ajax/test.html") 하면 메인 페이지에 있는 result 란녀석에게 ajax/test.html 페이지를 로드 하는 겁니다.

result 가 div 라고 했을때 그 div 안에 test.html 이 찍히겠네요

제가 이 함수를 쓴 방법은 좀 다릅니다.

통째로 불러오지 않고 대상에서 한조각만 불러오는 방법인데요

$("#result").load("ajax/test.html #content")  이렇게하면 ajax/test.html 에 있는 content 라는 조각만 불러오게 됩니다.

그냥... api 를 제공 하는 메인홈으로 가도 다 알게 됫습니다.

그래도 혹시나 두번째 w3스쿨에 들어가 보죠

아! 이곳에는 제가 했던 방식을 소개 하고 있네요 

$("#div1").load("demo_text.txt #p1")

아마 텍스트 파일도 불러올수 있는 모양이네요 ... 들어와보길 잘했습니다.

$("button").click(function(){

    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){

        if(statusTxt == "success")

            alert("External content loaded successfully!");

        if(statusTxt == "error")

            alert("Error: " + xhr.status + ": " + xhr.statusText);

    });

});

예제 코드가 있네요 콜백 함수를 썻네요 로드발생이 완료 되면 성공 실패를 alert 로 나타내는가 봅니다.

문제는 여기서 시작됩니다.

load 로 불러온 엘리먼트들은 재사용이 되지 않는다는 것입니다.

예전 live 라는 함수를 기억 하실지 모르겠지만.

죽어있는 녀석에게 생명을 불어 넣어 줘야 사용이 가능 합니다. 

on 으로 바뀌었죠

$("#div1").on( "dblclick", ".selectC", function() {}

 

이런식으로 on 해줘야 엘리먼트를 사용 할수 있습니다. 즉 저 div1라는 녀석은 메인 페이지에 있던 엘리먼트고

그 안에 load 로 죽어있는 녀석들이 채워진 겁니다. 

통채로 내용물에 산소를 주입해 그안에 .selectC 라는 앨리먼트에 더블클릭 이벤트를 넣어준거죠.

이상합니다. 그럼 이만