ajax2 [jQuery] Ajax 호출 후 추가된 엘리먼트에 이벤트가 작동하지 않을 때 목차 문제 상황 예를 들어 댓글 기능의 경우, 클라이언트의 페이지가 새로고침되지 않고 기능이 동작하게 하려면 ajax 비동기로 처리해야 할 것입니다. 그런데 댓글이 추가되는 상황을 생각해 봅시다. 댓글이 새로 추가되면 해당 댓글에 댓글 삭제 버튼도 함께 추가되고, 삭제를 클릭했을 때 다시 삭제가 비동기로 처리되어야 합니다. 그런데 비동기로 추가된 요소(삭제 버튼)에 대한 이벤트 처리를 다음과 같이 작성하면 이벤트 처리가 작동하지 않는 것을 확인할 수 있습니다. $(".commentDelBtn").on("click", function () { //댓글 삭제 코드 }); 원인 이는 버튼이 비동기로 새롭게 추가되었기 때문입니다. 이벤트 핸들러는 코드가 실행되는 시점에 페이지 내에 이미 존재하고 있는 엘리먼트에.. 2022. 8. 6. [jQuery] Ajax 비동기 처리 목차 Ajax 란? Ajax란 Asynchronous JavaScript and XML의 약자로서, 비동기 방식으로 서버와 통신할 수 있도록 하는 새로운 개발 기법입니다. 기존 방식의 웹에서는 웹 브라우저가 웹 서버에 요청을 전송하면, 웹 서버는 요청을 처리한 후 처리 결과를 HTML로 생성해 웹 브라우저에 전송합니다. 이렇게 되면 새로운 페이지 전체가 다시 로딩되기까지 사용자는 흰 화면에서 대기 상태에 놓여있어야 합니다. 반면, Ajax를 이용하면 페이지 전환 없이 한 페이지 내에서 서버로 값을 보내고 받아올 수 있으며 서버와 통신하는 중에도 다른 작업을 수행할 수 있게 됩니다. 이러한 방식을 비동기 처리라고 합니다. jQuery에서는 Ajax 기능을 손쉽게 구현할 수 있도록 여러 메소드를 제공하고 있.. 2022. 7. 24. 이전 1 다음
