克隆document.ready上的一個元素，只存儲在第一個動作的變量

Question

我想克隆一個div並將其存儲在頁面加載的變量中，然後每當單擊一個按鈕時附加它。但它只有當我第一次點擊按鈕時才起作用。任何想法，爲什麼？

$(document).ready(function() { 
 
    var inquiryItem; 
 
    inquiryItem = $('.firstItem').clone(); 
 

 
    $('body').on('click', '.create-inquiry-add', function() { 
 
    $(inquiryItem).addClass('animated fadeIn newitem').removeClass('firstItem').insertAfter('.inquiry-item:last-child'); 
 
    }); 
 
});

Answer 1

你這麼使用append()方法將只是移動相同的元素（以同一個地方我猜）克隆它只有一次。您的代碼應該是：

$(document).ready(function() { 
    var $inquiryItem = $('.firstItem'); 
    $('body').on('click', '.create-inquiry-add', function() { 
     $inquiryItem.clone().toggleClass('animated fadeIn newitem firstItem').insertAfter('.inquiry-item:last-child'); 
    }); 
}); 

使用toggleClass()爲簡單起見，如果前者元素還沒有animated fadeIn newitem類默認設置。