dynamically added checkbox handler for Internet Explorer

I have some elements that get added to my html page in response to a user's interaction with jQuery:

 addFields = '<div class="individual">
    <div class="member"> 
    Name:&nbsp;<input class="firstName" type="text">
    <input class="lastName" type="text">
    <input class="cit" onChange="citizenInfo(this)" type="checkbox">Non U.S. Citizen?<br/>
    </div> 
    <div class="citInfo" style="display:none"> 
    Country<input class="countryBirth" type="text"> 
    </div>
    </div>';
$('#items').append(addFields);

Now I want the 'cit' checkbox to toggle the visibility of the 'citInfo' div. So in my handler for the checkbox I have this:

function citizenInfo(obj) {
 开发者_如何学Go    $(obj).parent().parent().find('.citInfo').toggle();
}

This works in Safari and Firefox but now in IE. How can I get IE to toggle the visibility of this div in response to the checkbox being clicked?

You should bind a click event to the checkbox, check the value of the checkbox and act accordingly.

$( 'input.cit' ).click( function () {

    var div = $( '.citinfo' );

    $(this).attr( 'checked' ) ? div.show() : div.hide();

});