그누보드 ajax 댓글 후 옵션버튼 클릭 문제 이벤트 위임
// 댓글 옵션창 열기
$(".cmt_opt").on("click", function(){
console.log("ccccccc");
$(this).parent("div").children(".bo_vl_act").show();
});
보통 이렇게 되어있어서 바로 지정되어있는 부분을
// 댓글 옵션창 열기
$(".cmt_opt").on("click", function(){
$(this).parent("div").children(".bo_vl_act").show();
});
// 댓글 옵션창 열기
$(document).on("click", ".cmt_opt", function(){
$(this).parent("div").children(".bo_vl_act").show();
});
형태로 문서에서 이벤트 위임후에 동적요소로 지정해주면
위의 코드에서 .on('click', '.동적_요소_선택자', ...)
는 이벤트 위임을 구현하는 부분입니다. 여기서 동적_요소_선택자
는 실제로 동적으로 추가된 요소를 선택하기 위한 선택자로 변경되어야 합니다. 이 코드는 문서가 로드되었을 때 실행되며, 모든 .동적_요소_선택자
에 대한 클릭 이벤트를 처리합니다.
이벤트 위임을 사용하는 것의 장점은 동적으로 추가된 요소에 대한 이벤트 핸들러를 일일히 할당할 필요가 없다는 점입니다. 대신, 이벤트 핸들러를 할당하는 부모 요소에만 한 번 할당하면 됩니다. 이를 통해 코드의 복잡성을 줄이고 성능을 개선할 수 있습니다.
$(document).ready(function() {
// 문서가 로드될 때 초기화 코드
// 이벤트 위임을 사용하여 부모 요소에 클릭 이벤트 할당
$(document).on('click', '.동적_요소_선택자', function() {
// 클릭 이벤트 발생 시 실행되는 코드
// ...
});
// Ajax 요청
$.ajax({
url: '데이터를_로드할_URL',
method: 'GET',
success: function(response) {
// 데이터 로드가 성공했을 때 실행되는 콜백 함수
// 동적으로 추가된 요소가 부모 요소 내부에 포함되므로 이벤트 위임이 동작
},
error: function() {
// 데이터 로드가 실패했을 때 실행되는 콜백 함수
// 에러 처리 코드
}
});
});