如何为动态添加的元素初始化JQuery插件

Question

在此JSFiddle中 ，我有两个table.inner-table元素，它们最初是在HTML中添加的。 Spectrum插件适用于所有input.basic元素，即单击该元素可打开颜色选择器窗口。

但是此JSFiddle最初在HTML中只有一个table.inner-table元素。 单击标记为“单击”的按钮时，将添加另一个table.inner-table 。 问题在于此新添加的表中的两个input.basic元素。 单击它们不会打开颜色选择器窗口 。

我怀疑是因为拾色器已经初始化，所以它不适用于动态添加的元素。 在JS中，插件的初始化如下：

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

问题是如何使它适用于动态添加的元素？

我尝试过的是：

我看到了这个问题 ，并在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({}); 。

这是一个小提琴