動的に追加された要素のJQueryプラグインを初期化する方法

Question

このJSFiddleには、最初にHTMLに追加された2つのtable.inner-table要素があります。 Spectrum pluginは、すべてのinput.basic要素で正常に動作します。つまり、要素をクリックすると、カラーピッカーウィンドウが開きます。

しかし、JSFiddleは、最初にHTMLにtable.inner-tableという要素が1つしかありません。 [クリック]ボタンをクリックすると、別のtable.inner-tableが追加されます。問題は、この新しく追加されたテーブルの両方のinput.basic要素にあります。 それらをクリックしても、カラーピッカーウィンドウは開かれません。

カラーピッカーは既に初期化されているため、動的に追加された要素では機能しません。 JSでは、プラグインは次のように初期化されます：

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

質問私はそれが動的に追加された要素のためにどのように機能するかを作るのですか？私が試しWHAT

：

私はthis questionを見て、JSに次を追加しました。あなたがボタンをクリックすると、それが再初期化でしょう$(".basic").spectrum({});（=

$('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({}); 

を動作しませんでした。

をここでfiddle

です