JQuery, on함수 / load() - url 읽기

on() 함수

 

1. 비동적
$("요소").on("이벤트", function() {
... 이벤트 처리 ... });

2. 동적
앞으로 동적으로 추가할 요소에 대한 이벤트를 미리 정의해 놓는 기능이다.

새로 추가될 요소에 대한 이벤트이기 때문에 이 이벤트가 정의되는 시점에서는 대상이 존재하지 않기 때문에,

이 이벤트는 document 객체에 설정해야 한다.

 

$(document).on( "이벤트", "셀렉터",  function() {
      ... 이벤트 처리 ... 

});

---

load()

 

읽어오고자 하는 대상의 내용이 단순한 text나 html 태그를 표현하며

 

읽어온 내용을 특정 요소에 출력하는 것만을 목적으로 할 경우 load() 함수를 사용해 코드를 축약할 수 있다. 

 

$("CSS셀렉터").load( "읽어올 대상의 URL"

     [, function() { ...읽기에 성공한 후 실행될 함수...}]
);

 

"category-data.html" 파일의 전체 내용 중에서 "#category1-1" 라는 id값을 갖는 요소만을 읽어올 경우

$('#category1').load('../txt/category-data.html #category1-1', function(){
	$(this).show()
})