[jquery]동적으로 생성(추가)되는 요소 컨트롤하기

jquery를 이용해 동적으로 tag를 생성하고, 생성된 태그의 요소를 이용해 경고창을 띄우는 예제

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<div class='inner'>

    <div class="on">원본(클릭 시 경고창)</div>

</div>

<button type="button" class="el_copy">복사</button>(클릭 시 동적으로 생성되는 원본의 복사본 생성)

<script>

$(document).ready(function(){

  // 원본 및 동적으로 추가된 원본 복사본을 클릭 시 경고창을 띄웁니다.

$(document).on('click', '.on', function(){

alert('클릭되었습니다.');

});

        // 복사 버튼을 클릭시 동적으로 원본아래 복사본을 추가

$('.el_copy').on('click', function(){

$('.inner').append('<div class="on">동적으로 생성되는 복사본(클릭 시 경고창)</div>');

});

}); // end of ready()

</script>