单击时克隆和追加会使多个元素和切换不起作用

Clone and append on click makes multiple elements and toggle not working

本文关键字：元素 不起作用 追加 单击      更新时间：2023-09-26

我正在尝试克隆和附加元素。 追加后，我添加了toggle动画。 第一次单击时，它工作正常。 在我附加了多个元素之后。

以及动画不起作用。

这是 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>

Js ：

$('.parent').on('click', '.header', function () {
    $(this).find('h6').toggleClass('name').end()
    .siblings('.content').slideToggle();
});
$('button').on('click', function () {
   var newParent = $('.parent').clone();
   $('#content').append(newParent.removeClass('hide'));
});

JSfiddle

更新：

我更新了克隆传递var newParent = $('.parent').clone(true); - 动画作品！

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

var newParent = $('.parent:first').clone(true);

例 1

使用.clone(true)似乎可以修复动画。另一种解决方案是在单击时定位父级并委派.parent .header，因为克隆的.parent在初始加载后被添加到 DOM 中：

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

而不是

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

例 2

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

每次单击该按钮时，都会克隆具有 .parent 类的所有元素并将其追加到 #content

关于动画：

附加的元素对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>

.JS

$('.wrapper').on('click', '.parent .header', function(){ [...] });
相关文章：