如何爲動態添加的元素初始化JQuery插件

Question

在JSFiddle中，我有兩個最初添加在HTML中的table.inner-table元素。 Spectrum plugin適用於所有input.basic元素，即點擊元素打開顏色選擇器窗口。

但是這個JSFiddle最初在HTML中只有一個table.inner-table元素。當您點擊標記爲Click的按鈕時，會添加另一個table.inner-table。問題在於這個新添加的表中的input.basic元素。 點擊它們不會打開顏色選擇器窗口。

我懷疑因爲顏色選擇器已經初始化，所以它不適用於動態添加的元素。在JS，插件被初始化這樣的：

$(".basic").spectrum(); 

的問題是如何讓我它動態地添加元素的工作？

我的嘗試：

我看到this question，並添加以下到JS。沒有工作=（

$('body').on('focus', '.basic', function() { 
    $(this).spectrum({}); 
}); 

Answer 1

var table = $('.outer-table > tbody > tr:last').clone(); 
$(table).find('.sp-replacer').remove(); 
$('.outer-table > tbody').append(table); 
$(".basic").spectrum({}); 

如果單擊按鈕，它會重新初始化$(".basic").spectrum({});。

這裏有一個fiddle