Uncaught ReferenceError : functionName is not defined (jquery)

DOM(document) 구조가 동적으로 변경이 될 경우

 

변경된 DOM에서 onclick등으로 jQuery에서 정의한 함수(function)를 실행하면

 

functionName is not defined 오류출력과 함께 동작하지 않는 경우가 있다.

 

그 원인은 jQuery는 처음 DOM 구조가 완료되고 난뒤에 동작하기때문에 ( $(document).ready )

 

이후 구조가 변경된 DOM에서 onclick등으로 실행되는 함수는 작동이 되지 않는다.

 

해결방법은 함수를 jQuery밖으로 빼내거나 on() 함수를 이용하는 방법으로 처리를 한다.

 

functionName = function(){} 형태 사용 또는 <script> 분리하여 작성하면 에러 안난다.

 

 

login_click = function(){
	var form = $("#Login_Form");
	var id = $("#id").val();
	var pw = $("#pw").val();

	if (id == "") {
		alert("아이디를 입력하세요.");
		return false;
	}
	if (pw == "") {
		alert("패스워드를 입력하세요.");
		return false;
	}
	form.submit();
}

<script>
//로그인 버튼 클릭 메서드
login_click = function(){
	var form = $("#Login_Form");
	var id = $("#id").val();
	var pw = $("#pw").val();

	if (id == "") {
		alert("아이디를 입력하세요.");
		return false;
	}
	if (pw == "") {
		alert("패스워드를 입력하세요.");
		return false;
	}
	form.submit();
} 
</script>
<script>

//로그인 실패 메서드
var result = ${result};
if(!result){
	alert("로그인정보가 없습니다.");
};   

//체크박스 클릭시 페이지 이동
function movepage(page){
window.document.location.href=page;
return;
}


</script>