그누보드 ajax 댓글 후 옵션버튼 클릭 문제 이벤트 위임

그누보드 ajax 댓글 후 옵션버튼 클릭 문제 이벤트 위임

더시민 0 235 0

    // 댓글 옵션창 열기

    $(".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() {
      // 데이터 로드가 실패했을 때 실행되는 콜백 함수
      // 에러 처리 코드
    }
  });
});

0 Comments
제목
Category
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand