如何解决使用jQuery显示/隐藏动态添加的div
| 我有一个小组合框,允许用户选择他们想要注册参加活动的家庭成员的数量。但是,如果这些家庭成员不是美国公民,我想展示第二组选项供他们输入。我可以动态添加元素,但是我不知道如何显示/隐藏公民身份字段。 我是jQuery的新手,所以我可能以错误的方式执行此操作,但这是添加字段的函数:function familySize() {
while (famElements < $(\"#famNum\").val()) { // add fields
addFields = \'<div class=\"member\"> Name: <input id=\"name\" type=\"text\" placeholder=\"Name\" required> <input id=\"cit\" type=\"checkbox\" onChange=\"citizenInfo()\" > 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: <input id=\"name\'+famElements+\'\" type=\"text\" placeholder=\"Name\" required> <input class=\"cit\" id=\"cit\'+famElements+\'\" type=\"checkbox\" onChange=\"citizenInfo()\" > 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();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。