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

问题描述

| 我有一个小组合框，允许用户选择他们想要注册参加活动的家庭成员的数量。但是，如果这些家庭成员不是美国公民，我想展示第二组选项供他们输入。我可以动态添加元素，但是我不知道如何显示/隐藏公民身份字段。 我是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 \”最初确实将其隐藏，但是我只需要弄清楚如何捕获复选框上的单击以隐藏/显示公民身份文本输入。     

解决方法

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

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

    ,        如果您使用的是jQuery，只需使用选择器代替

getElementById()

，然后使用use3ѭ向其中添加内容。 另外，您绝对不能有两个具有相同ID的项目。您可以通过将

famElements

计数器附加到输入字段的ID上来进行分类。由于此更改排除了按ID选择元素的可能性，因此我也将您的复选框更改为

cit

类，因此可以使用简单的选择器附加事件。 对于click事件，可以使用

.live()

或

.delegate()

，这样就不必始终保持绑定事件。

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

// Your jQuery ready function
$(function(){
    // Click event on checkboxes
    $(\'#famItems\').delegate(\'.cit\',\'click\',function(){
        var $this = $(this);

            // Show or hide the div
        if($this.is(\':checked\')){
            $this.parent().find(\'.citInfo\').hide();
        } else {
            $this.parent().find(\'.citInfo\').show();
        }
    });
});

您可以使用jQuery更优雅地构建元素，但是它可以完成所需的工作。尽管您可能会考虑这样做，以防万一您将其添加到HTML中，那么大块的文本就显得太神秘了。     ,        我终于通过纯粹的反复试验弄清楚了。如果我在另一个div中同时包含\“ member \” div和\“ citInfo \” div，然后将复选框定义更改为此：

<input class=\"cit\" onChange=\"citizenInfo(this)\" type=\"checkbox\">

那么我需要的就是这个功能：

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