[Spring] 특정 댓글의 클릭 이벤트 처리

[Spring] 특정 댓글의 클릭 이벤트 처리

이전 글

2021.08.13 - [Spring] - [Spring] 새로운 댓글 처리

2021.08.11 - [Spring] - [Spring] 댓글 목록 HTML 처리

 

DOM에서 이벤트 리스너를 등록하는 것은 반드시 해당 DOM 요소가 존재해야 가능합니다. 동적으로 Ajax를 통해서 <li> 태그들이 만들어지면 이후에 이벤트를 등록해야 하기 때문에 일반적인 방식이 아니라 '이벤트 위임(delegation)'의 형태로 작성해야 합니다.

 

'이벤트 위임'은 실제로는 동적으로 생성되는 요소가 아닌 이미 존재하는 요소에 이벤트를 걸어주고, 나중에 이벤트의 대상을 변경해 주는 방식입니다. jQuery는 on( )을 이용해서 쉽게 처리할 수 있습니다.

 

get.jsp

jQuery에서 이벤트를 위임하는 방식은 이미 존재하는 DOM 요소에 이벤트를 처리하고 나중에 동적으로 생기는 요소들에 대해서 파라미터 형식으로 지정합니다. 위 경우 <ul> 태그의 클래스 'char'을 이용해 이벤트를 걸고 실제 이벤트의 대상은 <li> 태그가 되도록 합니다. 테스트 결과 오른쪽 이미지

 

위 코드가 정상 동작하면 화면에서 댓글을 볼 수 있는 모달창을 처리해 줍니다. 특정 댓글을 클릭하면 모달창을 보이도록 합니다.

 

get.jsp

 

댓글을 조회하는 행위는 현재 모든 내용이 화면에 있기 때문에 별도로 조회할 필요는 없지만, 원칙적으로 Ajax로 댓글을 조회한 후 수정/삭제를 하는 것이 정상입니다. 댓글을 가져온 후 필요 항목을 채우고 수정/삭제에 필요한 댓글 번호(seq_rno)는 'data-seq_rno' 속성을 만들어서 추가해 둡니다. 브라우저에서 특정 댓글을 클릭하면 아래 모습처럼 필요한 내용들만 보이게 됩니다.

 

실행 결과

---

오늘은 특정 댓글을 보는 방법에 대해 알아보았습니다.