[HTML, jQuery] 동적으로 생성된 태그에는 live로 이벤트 바인드하기

Scenario: 동적으로 생성된 a 태그(컨텐츠 제목) 을 클릭하면 삭제를 할 수 있게 하려고했다. on(click,function()) 키워드로 했는데 아무리 해도 안먹는 것이었다. 그래서 차선책으로 동적으로 생성시킬때 onclick='fn_delete(this)' 이런식으로 줘서 삭제를 시키려고했더니, fn_delete 함수에까지는 접근을 하는데 this obj를 죽어도 못찾는 것이었다. 좌절의 연속..

Solutions: 방법은 아주 간단했다 ㅡㅡ;; on 대신 live 키워드를 써주면 된다.

1.     $('#schedule_area').empty();
2.     $.ajax({
3.         type : "POST",
4.         url : "??????",
5.         data : "IDX="+pjtId,
6.         dataType: "json",
7.         async: false,
8.         success : function(data, textStatus, xhr) {
9.             $.each(data, function(key, val){
10.                 var dayForm = "<div class='media regi-item'>" +
11.                                 "<a class='thumb-left' name='sch_title_thumb' href='#this' >" +
12.                                     "<img src='/mobiza/common/getImage.do?IMG_NAME="+val['IMG_NAME']+"' alt='$TITLE'>" +
13.                                 "</a>" +
14.                                 "<div class='media-body'>" +
15.                                     "<h4 class='rs day_detail'>" +
16.                                         "<a class='be-fc-orange fw-b' id='sch_title' name='sch_title' href='#this' onfocus='this.blur()' '>"+val['SCH_TITLE']+"</a>" +
17.                                     "</h4>" +
18.                                     "<p class='rs comment-content'>"+val['SCH_CONTENT']+"</p>" +
19.                                     "<input id='SCH_IDX' name='SCH_IDX' type='hidden'  value='"+val['PJT_SCH_IDX']+"'>" +
20.                                 "</div>" +
21.                                "</div>";               
22.                
23.                 $('#schedule_area').append(dayForm)
24.             });
25.         },
26.         error : function(request,status,error) {  
27.            alert("code:"+request.status+"\n"+"error:"+error);
28.         }
29.      });

쿼리 결과에따라 동적으로 태그를 생성하는 ajax

text 0.19 KB

1.         $("a[name='sch_title'],a[name='sch_title_thumb']").live("click", function(e){ //제목 이나 섬네일 클릭시
2.             e.preventDefault();
3.             fn_schDelete($(this));
4.         });

해결 script