jquery - Jquery .on メソッドが矛盾して応答しない

Question

2 つのラジオ ボタンが直接重なり合っています。それぞれがそれぞれの div を表示し、他のラジオの div を非表示にします。名前以外はすべて同じです。「#fed」は機能しますが、「#state」は機能しません。何かご意見は？

HTML:

<label class="radio"><input type="radio" name="jur" id="fed" /> Federal</label>
        <span class="searchtype" id="feddiv"></span>

<label class="radio"><input type="radio" name="jur" id="state" /> State</label>         
        <span class="searchtype" id="statediv" ></span>

Javascript:

$('#state').on('click',function(event) {
    $('#statediv').show();
    $('#feddiv').hide();
});
$('#fed').on('click',function(event) {
    $('#feddiv').show();
    $('#statediv').hide();
});