字段Description
是可选的,仅当用户单击+Description
按钮时才会出现。然而,当生成另一个 div 时,代码失去了它应该隐藏的元素的焦点,并且按钮不再工作。
<script>
$(document).ready(function(e){
$(document).on('click', '#hide-desc', function(e) {
$("#description").slideToggle();
});
});
</script>
我有一个按钮可以删除和添加以下 div:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<!-- Among other stuff -->
<div id="description" class="item-child-desc">
{{ form }}
</div>
</div>
<div class="item-action-button">
<!-- Deletes item-wrapper and another button adds it -->
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
</div>
我知道该函数必须能够识别我正在谈论的描述
,但我不知道该怎么做。我尝试获取按钮的父 div 并使用 find()
方法指定 div,但无法使其工作。
我在使用自动完成功能时遇到了同样的问题。我相信,如果我能弄清楚我必须做什么,我就能让两者都工作。
最佳答案
根据您的评论,我假设您的 html 看起来像这样(请注意,我们使用 .description
而不是 #description
因为这些不是唯一元素):
<div class="item-wrapper">
<div class="item-action-button">
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
<div class="description" class="item-child-desc">
blergh
</div>
</div>
我们只需使用 e.target
查找父级 .item-wrapper
来引用事件源,然后搜索子级 .description
:
$(e.target).parents(".item-wrapper").find(".description").slideToggle();
根据您添加的示例 html,以下内容也应该无需修改即可工作:
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle();
也可以只使用this
:
$(this).parents(".item-wrapper").find(".item-child-desc").slideToggle();
在所有情况下,关键部分是parents(".item-wrapper")
。
关于javascript - 隐藏动态生成的特定 DIV 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32549747/