자바스크립트를 이용해 동적으로 추가된 요소에 이벤트 핸들러를 만들어주면 동작하지 않는다. 그래서 live 메소드를 통해 이벤트 핸들러를 생성해서 사용해왔지만 이 방법은 괘나 오래전부터 많은 문제점으로 인해 지원을 하지 않게 되버린지 오래이다.
즉, 옛날 버전 jQeury하면 모를까 요즘 버전의 jQuery 라이브러리에서는 live 메소드는 사용이 불가하다. 하지만 아직도 제목과 같은 검색어로 찾아보면 live 메소드를 이용하는 방법을 소개하는 글이 대다수다.
그렇다면 live를 대체할만한 방법이 있을까? 당연히 있다. jQuery에서는 live 메소드를 제외시키면서 bind나 on 메소드를 사용하라고 권장하고 있다. 하지만 예전 live 메소드를 사용하듯 메소드 이름만 변경해서 사용하면 정상동작을 하지 않는다.
아래 코드를 보면 대충 알 수 있다.
// .live method
$(document).ready(function(){
$("#id ul li").live("click", eventFunction);
});
// .on method
$(document).on("click", "#id ul li", eventFunction);
우선 보면 알겠지만 코드는 더 짧고 간결해졌다. $(document).ready(); 메소드안에 포함되던 형식으로 인해 길었던 코드가 한줄로 줄게 된다. 그리고 많은 이벤트 리스너 메소드가 존재한다. delegate, on, bind, live.. 이 중에서 on의 사용을 권장하고 있다. 저 메소드들은 모두 on을 기반하고 있기 때문이다.