[jQuery] 스크립트 함수로 만들어진 html에 걸린 id에 클릭 이벤트 건 스크립트 함수가 안 될 때

제목 이게 무슨 말이냐 싶은데 설명하자면,

목록을 조회해서 body 안의 목록 영역인 gallery의 html을 갈아엎어주는 함수 drawList를 만들었다.

그리고 그 함수에는 굳이 들어가지 않아도 되는 고정된 html도 그냥 같이 넣어주었는데 그게 글쓰기 버튼이고

그 글쓰기 버튼에 붙인 id인 writeBtn로 클릭 이벤트를 걸어서 글쓰기 페이지로 넘어가게 해주었다.

근데 그 클릭 이벤트가 안 먹히는 거다!

혹시나 하고 gallery 바깥에 버튼을 만들어서 그 버튼 id로 클릭 이벤트를 걸어봤더니 잘 넘어가더라.

분명 목록 만드는 함수를 도큐먼트레디 처음에 써서 먼저 실행시켰고 그 다음에 버튼 클릭 이벤트를 써놔서 순서도 잘 맞는데 왜 안 먹히는 건지 모르겠다. 다시 알아봐야겠음.

 

어쨌든 일단 글쓰기 버튼을 스크립트 함수에서 빼고 html 갈아엎는 거 말고 추가로 붙여주는 append로 고치고

글쓰기 버튼은 바디 안의 gallery에 직접 작성했다.

 

<script type="text/javascript">
$(document).ready(function() {
	//목록 조회
	reloadList(); //drawList를 실행하는 함수
    
 	// 글쓰기 페이지로
	$("#writeBtn").on("click", function() {
		//기존 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchText").val($("#oldText").val());
		
		$("#actionForm").attr("action", "RecipeWrite");
		$("#actionForm").submit();
	}); 
    
    //나머지는 생략
});

 

 

+ 강사님께 여쭤봤는데 아무리 목록을 첫 번째로 그리고 내가 버튼을 나중에 클릭하는 거여도 안 된다고 한다.

목록을 그리고 있는 동안 아래가 실행이 되기 때문에 라고 하심.. 

함수는 만들어놓고 내가 나중에 눌러서 쓰는 거고 목록은 미리 만들어진 건데도 안 된다고 함.. 잘 이해는 안 되지만 앞으로 주의하기로..!