При щелчке по радио добавлен класс, но радио не выбрано

Question

Ниже вы увидите код, над которым я работаю, и включенный JSFiddle.

Выпуск:

1. Когда я нажимаю на радио или CheckBox класс добавляется, но радио или флажок не установлен.

Пожалуйста, объясните код, чтобы я мог узнать об этом. Если у вас нет решения, любые подсказки или направление также будут полезны. Заранее спасибо!

http://jsfiddle.net/nLgqhqwc/6/

HTML

<div class="panel"> 
    <input type="text"/> 
</div> 

<div class="panel"> 
    <input type="text"/> 
</div> 

<div class="panel"> 
    <select> 
     <option>option</option> 
    </select> 
</div> 

<div class="panel"> 
    <input type="radio"/> 
</div> 

<div class="panel"> 
    <input type="checkbox"/> 
</div> 

CSS

.panel{ 
    padding:15px; 
    background:grey; 
    margin-bottom:15px; 
} 

.panel-primary{ 
    margin:0 15px 0 15px; 
    background:blue; 
    margin-bottom:15px; 
} 

JQuery

$(document).ready(function() { 

$('.panel').click(function() { 
    event.stopPropagation(); 
    $('.panel').removeClass('panel-primary'); 
    $(this).addClass('panel-primary'); 
}); 

$('input, select').bind('focus blur', function (event) { 
    event.stopPropagation(); 
    $('.panel').removeClass('panel-primary'); 
    $(this).closest(".panel").addClass('panel-primary'); 
}); 

$('input[type=radio]').change(function() { 
    event.stopPropagation(); 
    $('.panel').removeClass('panel-primary mrgn-lft-lg'); 
    $(this).closest(".panel").addClass('panel-primary'); 
}); 

}); 

Answer 1

Вопреки тому, что практически все другие ответы говорят, что проблема не с использованием event.stopPropagation();. Единственная проблема связана с линией $('input, select').bind('focus blur', function (event) {.

Проблема заключается в том, что focus event is triggered prior to the click event, класс panel-primary затем применяется к панели div, а левое поле перемещает ее вправо, и поэтому флажки или переключатель не получают событие щелчка. Простой способ проверить это - либо изменить CSS, чтобы левое поле не двигалось, либо удалило весь блок $('input, select').bind('focus blur', function (event) {.