javascript - 隐藏已动态生成的特定 DIV 元素

Question

字段 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>

我知道该函数必须能够识别我正在谈论的是哪个 description，但我不知道该怎么做。我试图获取按钮的父 div 并使用方法 find() 指定 div 但我无法使其工作。

我在使用自动完成功能时遇到了同样的问题。我相信，如果我能弄清楚我必须做什么，我就能同时完成这两项工作。

Answer 1

根据您的评论，我假设您的 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")。