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>

我们只需要使用.item-wrapper查找父e.target来引用事件的来源，然后搜索孩子.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")。

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

1 个答案: