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

Question

在此 JSFiddle, I have two table.inner-table elements which were added initially in the HTML. Spectrum plugin 中，所有 input.basic 元素都可以正常工作，即单击该元素会打开颜色选择器 window。

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

我怀疑是因为颜色选择器已经初始化，所以它不适用于动态添加的元素。在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

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

How to initialize a JQuery plugin for elements added dynamically

html

javascript

jquery

jquery-plugins

spectrumjs