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

【问题标题】：show/hide dynamically added divs using jQuery使用 jQuery 显示/隐藏动态添加的 div
【发布时间】：2011-09-05 18:38:58
【问题描述】：

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

我是 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" 最初确实隐藏了它，但我只需要弄清楚如何捕获复选框上的点击以隐藏/显示公民文本输入。

【问题讨论】：

您可以使用 .hide() 和 .show() 方法隐藏/显示 div。添加点击事件是 .click(function() { 这里要执行的代码 });
不幸的是，我似乎没有足够清楚地定义我的问题。我可以添加复选框并且参数有效。citizenInfo() 被调用就好了。只是我不知道在该方法中做什么。如何访问复选框下方的 div (citInfo) 并根据复选框的状态打开和关闭它的可见性？

标签： jquery checkbox dynamic-html

【解决方案1】：

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

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

【讨论】：

或者更好的是，使用.delegate()。

【解决方案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 中并且那一大块文本变得太神秘了。

【讨论】：

您好，感谢您的快速回复。虽然我尝试了这段代码，但它似乎不起作用。 $funcion() 在启动时被调用，但由于在更改组合框时调用了 familySize()，所以复选框处理程序永远不会被调用。如何将此功能与复选框相关联。
@solerous：我承认这段代码完全未经测试。 delegate() 将事件处理程序绑定到您的容器 div #famItems，因此只要它在文档准备就绪时存在并且它从未被破坏，它就应该工作。请注意，由于 ID 修复，我在您的复选框上添加了一个 cit 类以使选择器更容易，请确保在测试时也将其放在它们上。
好吧，#famItems 会存在，但 cit div 不会。它可以绑定到未定义项目的点击吗？
是的，delegate() 在容器元素的上下文中的工作方式与live() 一样。 live() 与将处理程序委托给 document 相同。

【解决方案3】：

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

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

那么我只需要这个函数：

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

【讨论】：