반응형
.load()
서버에서 데이터를 로드하고 반환된 HTML을 일치하는 요소에 배치한다.
.load(url [, data ][, complete ])
공통 부분 컴포넌트화
많은 페이지에서 사용되는 헤더부분이 수정되면 그 페이지들마다 하나씩 수정해줘야하는 번거로움이 있는데
공통된부분을 따로 빼서 불러오는 방식으로 분리해서 관리했다.
<script>
$("#headers").load("common/header.html");
$("#footers").load("common/footer.html");
</script>
<body>
<div id="headers"></div>
<div id="footers"></div>
</body>- load불러온 데이터가 headers,footers안으로 들어가게된다.
스크립트 적용
load메소드로 불러온 데이터는 동적으로 추가된거라 그런지 스크립트가 안먹혔다.
클릭이벤트와 같은것은 동적 이벤트 바인딩을 통해서 사용하면 됐는데, 스와이퍼js같이 로드되고나서 바로
적용돼야하는 스크립트가 안먹혔었는데 load 메소드뒤 콜백함수안에 넣어서 사용하니 해결됐다.
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
참고
https://blog.naver.com/blacklish1/221017411129
https://offbyone.tistory.com/235