.click(function () 이 안될때 (제이쿼리 클릭안되는 이유)

 

▼ 작동하는 코드

$( document ).on( 'click', '.cancel_reserv', function( event ){
    $("#choice_pop_wrap_reserv_cancle").css({ 'display': 'block' });
    $('body').css('overflow', 'hidden');
    console.log("#cancel_reserv 클릭됨");
});

 

▼ 작동하는 되지 않는 코드

$("#cancel_reserv").click(function () {
 console.log("#cancel_reserv 클릭됨");
 });

 

<해석>

• 첫 번째 코드는 동적으로 생성되는 요소에 대해서도 이벤트를 처리할 수 있으므로 페이지가 로드된 이후에 동적으로 생성된 .cancel_reserv 클래스를 가진 요소에도 이벤트를 캐치할 수 있습니다.
• 두 번째 코드는 #cancel_reserv 요소만을 대상으로 하며, 이 요소가 나중에 동적으로 생성되더라도 이벤트는 작동하지 않습니다.

 

 

회사에서 작업하다가 분명 클릭되게 만들었는데 (아래코드)

안돼서 원인을 찾아보니,

저 캔슬 버튼이 들어가는 코드가 동적으로 생성되는 코드여서 그런거였다.

 

 

동적으로 만들어지는 코드라면 아래와 같이 사용하자

$( document ).on( 'click', '.클릭할것', function( event ){
//나타낼 효과
    $("#choice_pop_wrap_reserv_cancle").css({ 'display': 'block' });
    $('body').css('overflow', 'hidden');
    console.log("#cancel_reserv 클릭됨");
});