jQuery 클릭 이벤트

 

jQuery 클릭 이벤트는 두가지가 있습니다.

 

$(document).ready(function(){

	$("#test01").click(function() { // 1번째
				   
		alert(this.id);             
	});     


	$("body").on("click", "[id=test02]", function(event) { // 2번째
				  
		alert(this.id);
	});      

});

 

1번째와 2번째는 기능적으로 같지만, 차이점이 하나 있습니다.

 

html이 이미 로딩(최초 로딩)이 되고 나서

 

새로운 html 영역을 jquery나 다른 방법으로 생성하게 되면 1번째 이벤트는 먹히지 않습니다.

 

최초 로딩할 때는 id가 "test01"인 곳이 없었기 때문이죠.

 

하지만, 새로운 html이 생성되더라도 2번째 이벤트는 먹힙니다.

 

왜냐면 body를 기준으로 클릭했을 때, id가 test02인 부분을 찾아가기 때문이죠.

 

 

ajax로 데이터를 받아서 jquery로 html를 생성했는데, 이벤트가 먹히지 않아서 찾아봤더니 저런 방법이 있네요.