jQuery, 동적 추가한 element 클릭 이벤트

jQuery 클릭 이벤트는 보통 on(), click(), onClick() 등을 사용한다. 동적으로 추가한 element에 평소처럼 이벤트를 적용하면 동작하지 않는다. 상위 element에 on() 이벤트를 사용하고 이벤트를 적용할 element의 클래스 혹은 아이디를 selector로 입력한다.

아래는 list에 동적으로 추가한 button의 value를 로그에 출력한다.

var list = document.getElementById("list");

// list에 버튼 10개 동적 추가
for (var i = 0; i < 10; i++) {
    var button = document.createElement("button");
    button.className = "itemButton";
    button.innerHTML = i;
    button.setAttribute("id", "button " + i);
    button.setAttribute("value", i);

    list.appendChild(button);
}

// 버튼 클릭 이벤트 생성
$("#list").on("click", ".button", function() {
    var index = Number($(this).val());
    console.log(index);
})

10개의 버튼에 모두 클릭 이벤트가 동작하여, 클릭한 버튼의 값이 로그에 출력된다.