[jQuery] 동적으로 추가한 요소 이벤트 먹통

● 에러 발생

Ajax로 데이터를 조회해서 화면에 동적으로 태그를 추가했음

$(선택자).on("click", function() { ... }); → 이벤트 처리 했는데 먹통임

 

● 에러 발생 원인

화면 로드 시에는 해당 요소가 없었기 때문임

 

● 해결 방안

$(document).on("click", 선택자, function() { ... }); → document 객체로 접근

 

if(list.length > 0) {
      for(var i=0; i<list.length; i++) {
	   html += "<tr>";
	   html += "<td></td>";
	   html += "<td id='IDX'>" + list[i].IDX + "</td>";
	   html += "<td>";
	   html += "<a class='request_title' href='#'>" + list[i].TITLE + "</a>";
	   html += "<input type='hidden' id='ANSWER_GB' name='ANSWER_GB' value='" + list[i].ANSWER_GB + "'>";
	   html += "</td>";
	   html += "<td>" + list[i].REQ_DTM + "</td>";
	   html += "<td>";
	   html += (list[i].ANSWER_GB=='N'?'답변대기중':'답변완료');
	   html += "</td>";
	   html += "</tr>";
      }
} 
else {
     html += "<tr><td class='tcenter' colspan='5'>조회된 결과가 없습니다.</td></tr>";	        
}
$("#my_tab3 tbody").append(html);

동적으로 요소 추가했는데 이벤트 먹통 !!

 

$(document).on('click', '.request_title', function(e) {	
	alert($(this).text());
});

document 객체로 접근하면 이벤트 정상작동 !!