JavaScript 자바스크립트 동적으로 생성된 태그에 클릭 이벤트 동작하지 않을 때 (jQuery 제이쿼리)

 

 

 

 

예를 들어 어떤 서비스 화면단에서 동적으로 생성되는 태그가 있다고 가정하고

 

이 태그를 클릭했을 때 어떤 이벤트를 발생시키기 원해서

 

다음과 같은 코드를 작성했다고 한다면.

 

// 동적으로 생성할 태그
html = ` 
            <li>
                <p class="title">${title}</p>
                <span class="author">${author}</span>
                <span class="content">${content}</span>
                <span class="createDate">${createDate}/span>
            </li>
        `;

/* 위 동적으로 생성한 태그를 'append()' 자바스크립트 함수를 이용해서 
원하는 위치('schedule' 라는 클래스명을 가진 태그) 안에 추가 */
$(".schedule").append(html);


/* 제이쿼리를 이용하여 'schedule' 라는 클래스명을 가진 태그의 자식요소 중 li 태그가 클릭되면 
실행하려는 코드를 아래와 같이 작성 */
$('.schedule li').on('click' ,function (e) {

  // li 태그가 클릭되면 실행할 코드, blah blah

});

 

동적으로 위와 같이 태그를 생성하고 생성한 태그를 클릭했을 때 특정 코드를 실행하려고 하는데

 

클릭 이벤트를 감지하는 위 코드가 동작하지 않는다.

 

그럴 경우에는 클릭 이벤트 감지 코드를 다음과 같이 작성해 주면, 클릭 이벤트가 감지하여 코드가 동작함

 

$(document).on('click', ".schedule li" ,function (e) {

  // li 태그가 클릭되면 실행할 코드, blah blah

});

 

 

두 코드의 차이점은 이벤트 핸들러를 등록하는 대상이 다르다는 것.

 

$(선택자).on('click' ,function (e) {}); 의 경우에는

 

동적으로 생성한 요소의 이벤트를 감지하지 못함

 

반면에 $(document).on('click', "선택자" ,function (e) {});

 

의 경우에는 document <- 문서 전체에 이벤트 핸들러를 등록하여

 

동적으로 생성한 요소에도 이벤트를 감지할 수 있음