динамически добавленный обработчик флажков для Internet Explorer

Question

У меня есть некоторые элементы, которые добавляются на мою html-страницу в ответ на взаимодействие пользователя с 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);

Теперь я хочу, чтобы флажок «cit» переключал видимость div «citInfo». Так что в моем обработчике для флажка у меня есть это:

function citizenInfo(obj) {
     $(obj).parent().parent().find('.citInfo').toggle();
}

Это работает в Safari и Firefox, но теперь в IE. Как я могу заставить IE переключать видимость этого div в ответ на нажатие флажка?

Answer 1

Вы должны привязать событие щелчка к флажку, проверить значение флажка и действовать соответственно.

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

    var div = $( '.citinfo' );

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

});