jquery 함수가 다시 시작될 때 변경되지 않음

Question

나는 jquery 함수를 사용하여 체크 상자가 선택되어 있는지 확인한 다음 이에 따라 div를 표시하거나 숨 깁니다. 또한 클래스에 "disabled-price"클래스가있는 div의 새 부분을 추가하는 다른 함수가 있으므로 새 부분을 추가 할 때 함수를 다시 실행합니다.

그러나 거기에서 "변경"이벤트가 더 이상 트리거되지 않습니다. 첫 번째 부분은 작동하지만 두 번째 부분은 작동하지 않습니다.

function disableInfo() { 

    //first part 
    var $disabledInfo = $('#invalidityInfo'); 
    if($disabledInfo.is(':checked')) { 
     $('.disabled-price').show(); 
    } else { 
     $('.disabled-price').hide(); 
    } 

    //second part 
    $disabledInfo.unbind('change'); 
    $disabledInfo.change(function() { 
     if($disabledInfo.is(':checked')) { 
      $('.disabled-price').show(); 
     } else { 
      $('.disabled-price').hide(); 
     } 
    }); 
} 

어떤 아이디어가 있습니까?

Answer 1

동적 요소에 이벤트를 캡처하기 위해 다음을 사용할 수 있습니다

// wait for the document to be ready. 
$(function(){ // equivalent to $(document).ready(function(){ 

    var $disabledInfo = $('#invalidityInfo'); 

    // initial check 
    if($disabledInfo.is(':checked')) { 
     $('.disabled-price').show(); 
    } else { 
     $('.disabled-price').hide(); 
    } 

    // create event listener 
    // use .on or .delegate to catch dynamic elements that are added on the fly 

    $('body').delegate('change','#invalidityInfo',function(){ 
     if($this.is(':checked')) { 
      $('.disabled-price').show(); 
     } else { 
      $('.disabled-price').hide(); 
     } 
    }); 


}) 

는 희망이 도움이 :

.delegate(selector, eventType, handler)

또는 여기

.on(events [, selector ] [, data ], handler)

은 예입니다 .