克隆和追加點擊使多個元素和切換不工作

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

UPDATE：

我更新了克隆傳遞var newParent = $('.parent').clone(true); - 動漫作品！

Answer 1

，你應該只克隆的第一個元素（或最後一件事）：

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

EXAMPLE 1

使用.clone(true)似乎可以修復動畫。另一種解決方案的目標是在用戶點擊父並且由於克隆.parent委派.parent .header被添加到DOM中的初始負荷後：

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

代替

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

EXAMPLE 2

Answer 2

克隆一個元素意味着之後會有兩個相同的元素（具有相同的類別）。

每次單擊該按鈕，具有.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> 

JS

$('.wrapper').on('click', '.parent .header', function(){ [...] });