CODEWITHSUNDEEP
jquery
user988129
user988129

Reputation: 73

Jquery .on Method Inconsistently Nonresponsive

I have two radio buttons directly on top of each other. Each one shows its respective div and hides the other radio's div. Everything about them is the same except the names - "#fed" works , "#state" doesn't. Any thoughts?

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();
});

Upvotes: 2

Views: 64

Answers (1)

Bwaxxlo
Bwaxxlo

Reputation: 1880

Instead of .on('click', function(){}); why not use .click(function(){}); ?

Also, set the ID in 'label' and not the 'input', just so that the person can click on the text to hide the rest.

Upvotes: 1

Related Questions