[JavaScript] append에서 onclick 변수 전달 하기

컴퓨터가 알려주는 에러가 조금만 더 친절하면 어떨까 싶은 생각이 종종 오는 요즘이다.

하지만 이미 내가 말도안되는 코드로 일 시키면 삐그덕 삐그덕 돌아가주는 것만 해도 고맙다가도 조금만 더 친절해주면 어떨까 싶은 생각이 종종 오는 요즘이다.

 

파이널 프로젝트를 하던 중 ajax로 데이터 받아 올 일이 많이 생겼다.

세미 프로젝트 중에는 별로 없어서 ajax로 데이터 받아 올 일은 생각보다 많지 않구나 생각했지만 오산이었다.

ajax가 없었더라면 내 페이지들은 돌아가지 않는다.

나는 이렇게 ajax 지옥에 빠져버렸다...

 

당연히 나는 ajax로 받아온 데이터를 가지고 apppend() 같은 함수를 이용해 화면에 나타내주고 거기에 onclick 이벤트도 걸어주고 싶다.

onclick 이벤트는 보통 inline으로 onclick="함수이름(변수);" 이렇게 쓰거나,
$("태그 클래스(.) 또는 아이디(#)").on('click', function(){} 이렇게 쓴다.

 

 

 

그래서 append 안에서 onclick에 변수를 주는 방법은?

\와 따옴표들을 적절히 써주면 된다.

 

1. 작은따옴표(')로 시작 했을 때

$(".scon" + id + s_type).append(
'<input type="button" onclick="sendMessage(\'' + id + '\',\'' + my_id + '\',\'' + s_img + '\');" value="보내기" class="send">');

\'' + 변수1 + '\',\'' + 변수2 + '\' 로 써준다.

 

2. 큰따옴표(")로 시작 했을 때

$(".scon" + id + s_type).append(
"<input type='button' onclick='sendMessage(\"" + id + "\",\"" + my_id + "\",\"" + s_img + "\");' value='보내기' class='send'>");

\"" + 변수1 + "\",\"" + 변수2 + "\" 로 써준다.

 

마치 따옴표 지옥같다. 나는 두개를 섞어서 내 손이 가는대로 막 썼는데 복붙할 때 굉장히 불편하다.

양이 굉장히 많아서 수습도 안되고 아주 힘들다.

제발 따옴표 하나도 생각 하고 쓰자.