附加功能不适用于克隆元素

Question

我正在尝试克隆一个带有两个文本输入的div，然后使用wpColorPicker()转换为colorpicker。如果我将文件绑定到文件准备就绪，克隆的项目会在颜色选择器中转换，但不能打开。

如果我将其设置为在克隆后触发，则它适用于克隆元素，但不适用于现有元素。而且，如果我在true .clone()上使用withDataAndEvents，则每个元素都会添加两次颜色选择器，其中第一个元素不会打开但第二个元素会打开作品。

以下是我尝试的一些代码..

<div class="colors">
    <input type="text" class="tabs-bg form-control" value="#fe4641">
    <input type="text" class="tabs-color form-control" value="#ffffff">
</div>
<button id="add-tab">Add Tab</button>
<button id="remove-tab" disabled="disabled">Remove Tab</button>

这个在克隆元素中添加了非工作颜色选择器。

jQuery(document).ready(function($){
    $('.tabs-bg, .tabs-col').wpColorPicker();

    $( '#add-tab' ).click(function() {
        var tabdiv = $('.colors:first').clone();
        tabdiv.hide().insertAfter('.colors:last').slideDown('fast', function(){

        var afterAdd = $('.colors').length;
            if ( afterAdd >= 2 ) {
                $('#remove-tab').removeAttr('disabled');
            }
        });

        return false;
    });

    $( '#remove-tab' ).click(function() {
        $('.colors:last').slideUp('fast',function(){
            $(this).remove();
            var afterRemove = $('.colors').length;
            if ( afterRemove < 2 ) {
                $('#remove-tab').attr('disabled', 'disabled');
            }
        });
        return false;
    });

});  

这个为克隆元素添加工作颜色选择器..

jQuery(document).ready(function($){

    $( '#add-tab' ).click(function() {
        var tabdiv = $('.colors:first').clone();
        tabdiv.hide().insertAfter('.colors:last').slideDown('fast', function(){
        $(this).find('.tabs-bg, .tabs-col').wpColorPicker();
        var afterAdd = $('.colors').length;
            if ( afterAdd >= 2 ) {
                $('#remove-tab').removeAttr('disabled');
            }
        });

        return false;
    });

    $( '#remove-tab' ).click(function() {
        $('.colors:last').slideUp('fast',function(){
            $(this).remove();
            var afterRemove = $('.colors').length;
            if ( afterRemove < 2 ) {
                $('#remove-tab').attr('disabled', 'disabled');
            }
        });
        return false;
    });

});  

并且，这个为每个元素添加了两个颜色选择器..

jQuery(document).ready(function($){
    $('.tabs-bg, .tabs-col').wpColorPicker();

    $( '#add-tab' ).click(function() {
        var tabdiv = $('.colors:first').clone(true);
        tabdiv.hide().insertAfter('.colors:last').slideDown('fast', function(){
        var afterAdd = $('.colors').length;
            if ( afterAdd >= 2 ) {
                $('#remove-tab').removeAttr('disabled');
            }
        });

        return false;
    });

    $( '#remove-tab' ).click(function() {
        $('.colors:last').slideUp('fast',function(){
            $(this).remove();
            var afterRemove = $('.colors').length;
            if ( afterRemove < 2 ) {
                $('#remove-tab').attr('disabled', 'disabled');
            }
        });
        return false;
    });

});   

我做错了什么？如何为每个克隆元素只获取一个工作颜色选择器？请帮忙