jQuery .change 함수는 한 번만 작동합니다.

Question

jQuery 1.11.1과이 스 니펫을 사용하여 선택 필드의 값 변경을 감지 한 다음 스크립트를 실행합니다. 그것은 한 번 작동하고 두 번째로 작동하지 않습니다. 그것은 '눈에 보이는'클래스를 제거하기에 충분합니다.

var oatChoice; 

$('#cereal').change(function(){ 

    oatChoice = ($(this).val()); 

    $('.oats').removeClass('visible').delay(1000).queue(function() { 
     imageURL = '/assets/images/layers/oats-' + oatChoice; 
     imgSwitch('.oats',imageURL); 
     $('.oats').addClass('visible'); 
    }); 

}); 

imgSwitch = function(div,imgURL){ 
    $(div + ' img').remove(); 
    $(div).append('<img src="' + imgURL + '.png"/>'); 
} 

나는 아래의 HTML이 비트에이 코드를 실행 해요 :

내가 여기에 바이올린을 만들어

<div class="layer oats"> 
    <img src="/assets/images/layers/oats-applecinnamon.png" alt=""> 
</div> 

<select name="cereal" id="cereal" class="form-control"> 
    <option value="">- Select A Cereal -</option> 
    <option value="applecinnamon">Apple Cinnamon Oatmeal</option> 
    <option value="vanilla">Vanilla</option> 
</select> 

... http://jsfiddle.net/aehj289o/1/ 이미지가 누락하지만 당신은 첫 번째 이동 한 후 작업을 종료 것을 알 수 있습니다 약. 당신은 전역 범위에서 당신의 바르와 기능을 가지고 시도 할 수 있으며 다음과 같이 각각의 변경 작업과 기능을 다시 렌더링 :

$('#cereal').unbind('change').change(function(){ 

    //the rest of your code 

}) 

편집 :