[JavaScript/jQuery] 스크립트로 그린 목록 중 하나에 클릭 이벤트를 걸어도 걸리지 않을 때 (동작 안 할 때)

저번부터 스크립트로 목록을 그리고 그 중 하나에 이벤트를 걸면 이벤트가 걸리지 않았다.

그래서 글쓰기 버튼도 따로 빼서 html 내에 미리 만들어주고 그랬음.

이제 상세보기로 넘어가야 하는데 글을 클릭해도 상세보기 페이지로 넘어가지 않았다.

 

브라우저에서 Event Listeners를 확인해보니 click 이벤트가 안 걸려 있었다.

 

 

그래서 생각해낸 게 목록을 그릴 때 아예 태그에 이벤트를 붙여주는 것..

 

이벤트 걸어줄 함수를 따로 만들고

아예 목록을 그릴 때 태그에 onclick 해당 이벤트를 붙여서 그려주었다.

 

function goDetail(no) {
	$("#no").val(no);
		
	// 기존 검색상태 유지
	$("#searchGbn").val($("#oldGbn").val());
	$("#searchText").val($("#oldText").val());
	      
	$("#actionForm").attr("action", "RecipeDetail");
	$("#actionForm").submit();
}

이때 이벤트 붙여주면서 괄호 안에 글 번호를 넣어주었고

이벤트 함수 내에서 글 번호를 받아서 

form 태그로 보내주는 히든 인풋 중 id가 no인 것에 담아주었다. 

그래야 해당 글 번호로 넘어감!

 

안 보이던 클릭 이벤트가 보이고 클릭 이벤트가 동작한다.

 

 

 

 

+ 구글링 해보니 간단한 해결법이 있었다.

상위를 document로 주면 된다.

↓

 

원인은 $(document).ready(function(){ 함수를 통해 이미 로드 해오면서 진행이 됐기에 실행이 안 되는 것으로 파악된다. 

 

 

 

+ 동적인 것에 이벤트를 주니 안 걸리는 거라고 한다.

이벤트를 줄 때는 항상 고정적으로 있는 것에 걸어야 한다.

그래서 동적인 요소에 이벤트를 줄 때는 고정적인 요소를 통해서 걸어줘야 한다.

먼저 존재하고 있는 부모 요소나 형제 요소나 주변 요소나 아무거나의 어떻게 관련한 어느 것 이런식으로~~