动态添加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'复选框切换'citInfo'div的可见性。所以在我的复选框处理程序中我有这个：

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

});