javascript - 如何为动态添加的元素初始化 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