EXAMPLE 1

Question

我正在尝试克隆和追加元素。在我追加之后，我添加了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); - 动画效果！

Answer 1

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

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

EXAMPLE 1

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

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

而不是

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

EXAMPLE 2

Answer 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(){ [...] });

克隆和附加点击会使多个元素和切换不起作用

2 个答案:

EXAMPLE 1

EXAMPLE 2