jquery - 使用 jQuery 显示/隐藏动态添加的 div

Question

我有一个小组合框，允许用户选择他们想要注册参加事件的家庭成员的数量。但如果家庭成员不是美国公民，我想向他们展示第二组入境选项。我可以动态添加元素，但我不知道如何显示/隐藏公民身份字段。

我是 jQuery 新手，所以我可能以错误的方式执行此操作，但这是添加字段的函数:

function familySize() {
        while (famElements < $("#famNum").val()) { // add fields
                    addFields = '<div class="member"> Name:&nbsp;<input id="name" type="text" placeholder="Name" required> &nbsp;&nbsp;<input id="cit" type="checkbox" onChange="citizenInfo()" >&nbsp;&nbsp;Non U.S. Citizen?<br/></div> <div class="citInfo" style="display:none"> <input id="countryCitizenship" type="text" placeholder="Citizenship" required> </div>';
                    document.getElementById('famItems').innerHTML += addFields;
                    famElements++;
                }
        while (famElements > $("#famNum").val()) { // remove fields
            console.log("remove one");
             $('#famItems div:last').remove();
             famElements--;
        }
    }

<div id="famItems">
            </div>

citInfo div 上的 style="display:none"最初确实隐藏了它，但我只需要弄清楚如何捕获复选框上的点击来隐藏/显示公民身份文本输入。

Answer 1

使用 jQuery 的 live函数来处理动态创建的项目的事件。

$(function(){
    $('#cit').live('change', citizenInfo());
});