동적 생성 태그를 사용하다 onClcik등의 이벤트를 주어야 하는 경우가 발생하였다.
이 경우 문자열로 구분을 제대로 주지 않으면.
<a> 태그가 깨지는 상황이 발생하여 스크립트를 실행하지 못하는경우가 종종 생기게 되는데.
태그가 깨지는 경우
|
|
※ 이런식으로 태그가 깨져서 출력되었다. <a zgmf-x10a);'="" y',="" onclick="alertOpen(" href="javascript:;">0</a>
이 \기호를 잘 입력해 줌으로서 해결할 수 있다.
아래 코드를 예러 들자면.
dynamic_tag.php
|
<html>
<head>
<title>건담 파일럿 리스트</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var array = new Array();
array[0] = { "title" : "프리덤", "pliot" : "키라 야마토", "code" : "ZGMF-X10A" }
array[1] = { "title" : "저스티스", "pliot" : "아스란 자라", "code" : "ZGMF-X09A" }
array[2] = { "title" : "데스티니", "pliot" : "신 아스카", "code" : "ZGMF-X42S" }
array[3] = { "title" : "엑시아", "pliot" : "세츠나 F 세이에이", "code" : "GN-001" }
array[4] = { "title" : "아리오스", "pliot" : "알렐루야 합티즘", "code" : "GN-007" }
array[5] = { "title" : "듀나메스", "pliot" : "록온 스트라토스", "code" : "GN-002" }
array[6] = { "title" : "스트라이크 느와르", "pliot" : "스웬 칼 바얀", "code" : "GAT-X105E" }
array[7] = { "title" : "세이버", "pliot" : "아스란 자라", "code" : "ZGMF-X23S" }
array[8] = { "title" : "윙 제로 EW", "pliot" : "히이로 유이", "code" : "XXXG-00W0" }
array[9] = { "title" : "데스사이즈 EW", "pliot" : "듀오 맥스웰", "code" : "XXXG-01D2 " }
function dynamicData() {
var tableList = "";
for(var i = 0; i < array.length; i++) {
// tableList += "<tr><td width=\"50px\">" + i + "</td><td width=\"500px\"><a href=\"javascript:;\" onClick=\"alertOpen('Y', '" + array[i]['code'] + "');\">" + array[i]['title'] + "</a></td><td width=\"200px\">" + array[i]['pliot'] + "</td></tr>";
tableList += "<tr>";
tableList += "<td width=\"50px\">" + i + "</td>";
tableList += "<td width=\"500px\"><a href=\"javascript:;\" onClick=\"alertOpen('Y', '" + array[i]['code'] + "');\">";
tableList += array[i]['title'] + "</a></td>";
tableList += "<td width=\"200px\">" + array[i]['pliot'] + "</td>";
tableList += "</tr>";
}
jQuery("#dynamicTable").html(tableList);
}
function alertOpen(on, code) {
if(on == "Y") {
alert(code);
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<th width="50px">번호</th>
<th width="500px">제목</th>
<th width="200px">파일럿</th>
</tr>
</table>
<table border="1" id="dynamicTable"></table>
<br/>
<input type="button" onClick="dynamicData();" value="데이터 불러오기"/>
</body>
</html>
|
출력결과
|
|
출력결과 List On
|
|
위 코드와 같이 ""(따옴표)가 사용되는 곧 앞에 \기호를 입력함으로선 브라우저상에선 따옴표를 인식시켜서 해결해야 한다.
동적태그에서 스크립트 호출
|
tableList += "<td width=\"500px\"><a href=\"javascript:;\"
onClick=\"alertOpen('Y', '" + array[i]['code'] + "');\">" + i +
"</a></td>"; |
