동적 Element 생성시 함수인자 따옴표

오늘 작업하다가 같이 프로젝트를 하시던 분이 onlick 으로 함수 호출하려고 하는데 함수 인자가 있는 함수가 작동이 안한다고 했다. 

 

var de +="<button class='mybutton' onclick='myfunction(\""+action+"\")' >조회</button>"

 

이걸보고 나는 당연히 될줄 알았는데 안된다... 매개변수로 숫자를 넣어주면 되는데 매개변수가 문자면 함수가 동작을 하지않았다.

 

<자바스크립트 동적 엘리먼트 따옴표 혼합 해서 사용할 경우, 한수내 매개변수가 포함된 경우>

 

var de +="<button class='mybutton' onclick='myfunction(\""+action+"\")' >조회</button>"

 \ 는 이스케이프라고 불리우는 것으로, 이스케이프 다음에 나오는 따옴표는 무시해라 라고 해석하면 된다. 

위 경우는 함수 안에 인자가 string 이기 때문에 홑 따옴표(또는 따옴표)로 감싸야 합니다.

그리고 함수를 감싸고 있는 것이 홑 따옴표이므로, 내부는 따옴표를 넣어야 합니다. 

 

그런데 따옴표가 연속되므로 이스케이프가 없다면, 그냥 중간에 따옴표가 생신것이 됩니다.

매개변수를 감싸는 따옴표가 필요함으로 브라우저가 해석할 때 html 과 자바스크립트 변수 사이의 연결을 위해 따옴표를 사용하되, 매개변수를 감싸는 따옴표는 살리기 위해, 이스케이프를 넣어서 다음에 나오는 따옴표를 무시하라고 명령하기 위해서 이스케이프를 넣었습니다. 

 

action = 변수 명

 

 

더 정확한원인들과 내용들은 공부를 하다보면 알아내겠지???....제발제발제발

 

나중에 더 자세한 원인을 알게되면 코멘트를 달겠다. 

 

참조: https://rich-informer.tistory.com/26