[Django/K-unirank] javascript click 이벤트를 구현하는 두가지 방법

자바스크립트로 다중 이미지 업로드 및 업로드 된 이미지 미리보기 기능을 구현 중 한가지 문제에 부딪혔다.

이미지를 업로드하면 미리보기 사진과 X버튼이 출력되고 X버튼을 누르면 미리보기 사진이 사라지게 하려고 코드를 아래와 같이 짰는데

    $(document).ready(function() {
        $('#image').change(function() {
            for (var file of this.files) {
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#image-preview').append(
                            '<div class="image-preview-item">' +
                                '<img class="rounded" src="' + e.target.result + '" alt="Image Preview" style="width: 100px; height: 100px; object-fit: cover;" />' +
                                '<button type="button" class="delete-image">X</button>' +
                            '</div>'
                        );
                    }
                    reader.readAsDataURL(file);
                }
            }
        });

        $(".delete-image").click(function() {
            $(this).parent().remove(); // 클릭된 요소의 부모 div를 삭제
        });
    });

X버튼을 눌러도 미리보기 사진이 삭제되지 않는다. 왜그런 것일까?
이를 채찍피티에게 물어보았따.

???

동적으로 할당된 요소한테는 $(".delete-image").click() 함수가 작동하지 않는다는 건가??

그래서 코드를 다음과 같이 수정했다.

<script>
    $(document).ready(function() {
        $('#image').change(function() {
            for (var file of this.files) {
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#image-preview').append(
                            '<div class="image-preview-item">' +
                                '<img class="rounded" src="' + e.target.result + '" alt="Image Preview" style="width: 100px; height: 100px; object-fit: cover;" />' +
                                '<button type="button" class="delete-image">X</button>' +
                            '</div>'
                        );
                    }
                    reader.readAsDataURL(file);
                }
            }
        });

        $('#image-preview').on('click', '.delete-image', function() {
            $(this).parent().remove(); // 클릭된 요소의 부모 div를 삭제
        });
    });
</script>

놀랍게도 잘 작동한다..

그니까 원래부터 있었던, 정적인 요소에는 $(".delete-image").click() 요 함수가 잘 작동하는데, 자바스크립트로 생성한 즉, 동적인 요소에는 저 함수가 작동 하지 않는다고 한다.

따라서 정적인 요소하고 동적인 요소 둘 다한테 잘 작동하는 $('#image-preview').on('click', '.delete-image', function()) 요 함수를 쓰라는 말인데..ㅎ

앞으로는 걍 $('#image-preview').on('click', '.delete-image', function()) 이 함수만 써야겠다.