자바스크립트 버튼 이벤트 위임

김동욱·2024년 11월 1일
//cards 라는 요소 내에서 자식 요소 포함 'button'요소가 클릭되면 실행됨
$('#cards').on('click', `button`, function () {

			어떤 기능을 하는 버튼인지 구별하기 위해서 버튼의 id로 구별
            const btnId = $(this).attr('id');

            버튼의 id 네이밍을 [기능 - 카드번호] 로 설정 후 split하여 기능과 카드번호 식별
            const action = btnId.split('-')[0];
            const cardId = btnId.split('-')[1];

            //카드의 가까운 자식요소에서 가장 가까운 카드를 찾고 카드에 부여된 doc.id를 가져오기
            const docId = $(`#detailBtn-${cardId}`).closest('.memberCard').data('id');
            console.log(docId);

            //클릭된 버튼에 따라 다른 기능 실행
            if (action === 'updateBtn') {
            } else if (action === 'memberUpdateBtn') {
            	updateCard();
            } else if (action === 'deleteBtn') {
            	deleteCard();
            } ele if (action === 'commentBtn') {
            	showCommentInput();
            } else if (action === 'commentSaveBtn') {
            	saveComment();
            }
}
            
profile
갓겜만들어야지

0개의 댓글