Функция JQuery hasClass() не работает должным образом

Question

У меня есть этот простой сценарий jquery, который по какой-то причине не работает должным образом. Когда я нажимаю на триггер, он действительно меняет класс css и не дает никакой ошибки?

$(document).on('click', '.cours-box .panel-footer', function() { 
     var _CoursBox = $(this).closest('.cours-box');      
     if(_CoursBox.hasClass("active")) { 
      _CoursBox.removeClass('panel-primary active').addClass('panel-default'); 
     } else { 
      _CoursBox.removeClass('panel-default').addClass('panel-primary active'); 
     } 
    }); 

Вот HTML:

<div class="panel cours-box panel-primary active"> 
    <div class="panel-body"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <h4>Titel<small>1302</small></h4> 

      </div> 
      <div class="col-md-6"> 


      </div> 
     </div> 
    </div> 
    <label class="panel-footer" for="r1302"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <input class="hidden" id="r1302" type="checkbox" name="course_[]" value="1302"> Jan| Day:1</div> 
      <div class="col-md-6"> </div> 
     </div> 
    </label> 
</div> 

Answer 1

Я просто переписал сценарий на более удобный путь! Я все еще хотел бы знать, почему это не сработало?

$(document).on('click', '.cours-box input[type="checkbox"]', function() { 
     var _CoursBox = $(this).closest('.cours-box'); 
     if (!$(this).is(':checked')) { 
      _CoursBox.removeClass('panel-primary active').addClass('panel-default'); 
     } else { 
      _CoursBox.removeClass('panel-default').addClass('panel-primary active'); 
     } 
    });