Javascript 单击时克隆和附加使多个元素和切换无效

我正在尝试克隆和附加元素。附加后，我添加了一个

切换

动画。第一次单击它就可以正常工作。在我添加了多个元素之后

以及动画不工作

以下是html：

<div class="parent hide">
    <div class="header">
        <h6>Header</h6>
    </div>
    <div class="content">
        <p>paragraph content </p>
    </div>
</div>

<div id="content">

</div>

<button>Add</button>

更新：

---

我更新了克隆传递

var newParent=$（'.parent'）.clone（true）-动画作品
 克隆一个元素意味着之后将有两个相同的元素（同样具有相同的类）

每次单击该按钮时，所有具有.parent类的元素都会被克隆并附加到#内容中

关于动画：

DOM不知道附加的元素，因此.on（'click'）不起作用。
尝试在.parent元素周围放置一个包装器，然后使用以下语法：

HTML

<div class="wrapper">
    <div class="parent hide">
        <div class="header">
            <h6>Header</h6>
        </div>
        <div class="content">
            <p>paragraph content </p>
        </div>
    </div>

    <div id="content">

    </div>
</div>

<button>Add</button>

克隆一个元素意味着之后将有两个相同的元素（同样具有相同的类）

每次单击该按钮时，所有具有.parent类的元素都会被克隆并附加到#内容中

关于动画：

DOM不知道附加的元素，因此.on（'click'）不起作用。
尝试在.parent元素周围放置一个包装器，然后使用以下语法：

HTML

<div class="wrapper">
    <div class="parent hide">
        <div class="header">
            <h6>Header</h6>
        </div>
        <div class="content">
            <p>paragraph content </p>
        </div>
    </div>

    <div id="content">

    </div>
</div>

<button>Add</button>

您应该只克隆第一个元素（或最后一个元素）：

使用
.clone（true）
似乎可以修复动画。另一种解决方案是在单击时以父对象为目标，并委派
.parent.header
，因为克隆的
.parent
将在初始加载后添加到DOM中：

$('#content ').on('click', '.parent .header', function () {

而不是

$('.parent').on('click', '.header', function () {

您应该只克隆第一个元素（或最后一个元素）：

使用
.clone（true）
似乎可以修复动画。另一种解决方案是在单击时以父对象为目标，并委派
.parent.header
，因为克隆的
.parent
将在初始加载后添加到DOM中：

$('#content ').on('click', '.parent .header', function () {

而不是

$('.parent').on('click', '.header', function () {

当然，完全可以。我只是说为什么他每次点击按钮都会有越来越多的div。当然，这很好。我只是说为什么他每次点击按钮都有越来越多的div。