[jquery] .on() 함수 설명

http://noritersand.tistory.com/218

위 주소를 참조하면 http://api.jquery.com/on/  API를 정리한 내용이 나온다

EX1) 1번 내용의 경우 demo6의 li 요소에 대해서 alert를 띄우는 것이다.
하지만 button을 눌러 append가 된 요소에 대해서는 alert를 띄우지 않는다.
이것을 개선한 내용이 EX2이다

<script>
    jQuery(document).ready(function() {
        $("#demo6 li").on("click", function() {
            alert($(this).text());
        });

        $("#demo6 button").on("click", function() {
            $("#demo6 ul").append("<li>added</li>");
        });
    });
</script>
<div id="demo6">
    <button>ADD</button>
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
    </ul>
</div>

EX2) 아래와 같이 .ON() 함수에 2번쨰 인자로 "li"를 써주면 동적으로 생긴 li에 대해서도 제어를 가능할 수 있게 해준다

<script>
    jQuery(document).ready(function() {
        $("#demo7").on("click", "li", function() {
            alert($(this).text());
        });

        $("#demo7 button").on("click", function() {
            $("#demo7 ul").append("<li>added</li>");
        });
    });
</script>

정리하면 아래와 같다

$(선택자).on(이벤트타입 [, 추가선택자] [, 데이터], 핸들러());

1. 파라미터에 추가선택자가 없다 → bind()와 동일, 동적처리 불가능

2. 파라미터에 추가선택자가 있다 → delegate()와 동일, 동적처리 가능