DOM으로 생성된 HTML 기능 사용하기

프로젝트를 진행하는 과정에서 ajax를 이용한 온전한 회원 상세페이지를 띄우는 과정에서 dom을 이용해서 html(html)로 그리는 기능을 구현했다. 하지만 이후에 문제가 생겼다. ajax를 통해 그리게 된 html안의 기능이 실행되지 않는 것이었다. 

$( ".Pmain #searchBtnDP").on("click", function () {
		console.log(" 상세페이지 검색 버튼 작동한다.");
		$(".Pmain .boxForBoard").empty();
		drawPopup();
		
	});

이 코드는 $(document).ready() 안에 존재한다.

 

문제.

---

상세페이지 안의 검색버튼 및 여러가지 click 기능 또는 함수들이 실행 되지 않는 문제점을 발견했다.

 

 

 

원인.

---

선생님이 항상 말씀하시던 시점의 문제였는데 이게 시점이라고 했을 때는 알아 듣지 못했는데 해아 시점이라는 이야기가 화면에 해당 객체가 그려지고 나서인가 아닌가에 대한 것이 있어야한다는게 문제였다.

 

처음 로드 될때 ready안에 있는 모든 함수는 실행된다. 하지만 실행될 당시에 내가 지정해 놓은 searchGbnDP라는 버튼이 아직 존재하지 않기 때문에 찾지 못한다.

 

결국 javascript는 해당 선택자를 찾지 못하고 없는 이벤트로 인식해 버린다.

 

 

질문.

---

ready 안에 들어있는 팝업을 그리는 함수를 실행 시켰다. 그렇게 해당 시점에는 html이 그려져있다. 그 다음 팝업 페이지 안의 검색 버튼을 클릭했을 때 실행하는 위의 코드와 같은 함수를 실행 시켰는데 작동하지 않았다. 하지만 이벤트 객체를 document 즉 현재 페이지에 걸었을 때는 실행이 되었다. 차이가 뭔지 모르겠어서 이제 질문을 하려고 한다.

 

$(document).on("click", ".Pmain #searchBtnDP", function () {
		console.log(" 상세페이지 검색 버튼 작동한다.");
		$(".Pmain .boxForBoard").empty();
		drawPopup();
		
	});

 

 

해답.

---

실행 순서의 문제이고 $("이벤트 소유 객체"). 에 대한 개념이 없어서 많이 헤맸던 것 같다. 해당 상황에 누가 이벤트를 가지고 있는가가 중요한 요소이다. 소유 객체에 body, document를 적용시키면 body나 document가 그려지면서 해당 이벤트를 가지고 있기때문에 html이 그려져있던 안그려져있던 사실상 중요하지 않다. 하지만 .Pmain이라는 요소에 이벤트를 소유시키게되면 처은 document.ready로 화면에 그릴때 지정한 Pmain 객체가 존재하지 않기 때문에 이벤트를 주게 할 수 없다.

 

예를들어 이런 식이다. 우리 사무실에 재현, 정민, 인복 이렇게 나 포함 네명이 있다고 하자. 재현이한테 지목당하면 한바퀴돌아라고 부탁하고 정민이한테 지목당하면 옆으로 굴러 인복이한테 지목당하면 뒤로 굴러 라고 처음에 이야기를하는데 사무실에 없는 건정의 역할로 백덤블링을 할당했다. 이후에 건정이가 왔고 쇼가 시작되었다. 재현이를 지목하여 재현이가 한바퀴 돌았고 정민이를 지목하여 옆으로 굴렀고 인복이를 지목하여 뒤로 굴렀다. 하지만 건정이를 지목했을 때 건정이는 아무것도 모르기 때문에 아무 행위도 하지 않고 두리번 주변을 둘러보았다. 그렇게 쇼는 급하게 마무리되었다.