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

Answer 2

如果您使用的是jQuery，只需使用选择器而不是getElementById()，并使用append()向其中添加内容。

此外，您永远不应该有两个具有相同ID的项目。您可以通过将famElements计数器附加到输入字段的ID来对其进行排序。由于此更改排除了按ID选择元素，因此我还将复选框更改为具有类cit，因此我可以使用简单选择器附加事件。

对于点击事件，您可以使用.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并且大块文本变得太神秘了。

Answer 3

我终于通过纯粹的反复试验弄明白了。如果我将“member”div和“citInfo”div都包含在另一个div中，然后将复选框定义更改为：

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

然后我需要的就是这个功能：

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

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

3 个答案: