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

Question

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

动画也不起作用。

这是 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); - 动画有效!

Answer 1

您应该仅克隆第一个元素(或最后一个元素):

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

EXAMPLE 1

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

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

而不是

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

EXAMPLE 2