jquery 内的颜色选择器在添加新行时重复器不起作用

Question

我正在为与 bootstrap 兼容的颜色选择器使用第三方插件，此选择器字段已添加到转发器中，因此我可以尽可能地添加行和删除行我像下面这样启动插件

$('.color-picker').minicolors();
$(".mt-repeater").repeater();

但是颜色选择器字段不适用于添加的行，它只适用于第一行。查看 codepen 上的演示，尝试点击添加行按钮，然后点击颜色选择器 https://codepen.io/anon/pen/ZexeYj 我该如何处理这个问题？当我在添加新行后尝试再次调用 minicolors 时出了点问题。

Answer 1

but the color picker field not work for the added rows, it only works for the first row.

发生这种情况是因为颜色选择器在下一行被部分初始化....

根据 jquery.repeater 文档，您必须处理 show 选项回调：

$(".mt-repeater").repeater({
    show: function () {
        $(this).find('.color-picker').minicolors('destroy').minicolors();
        $(this).show();  //  or $(this).slideDown();
    }
});

在这个方法中你可以销毁当前的迷你颜色并初始化一个新的。

工作片段：

$('.color-picker').minicolors();


$(".mt-repeater").repeater({
    show: function () {
        $(this).find('.color-picker').minicolors('destroy').minicolors();
        $(this).show();
    }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>


<div class="form-group mt-repeater">
    <div class="col-sm-4">
        <div data-repeater-list="group-c">
            <div data-repeater-item class="mt-repeater-item">
                <div class="row mt-repeater-row">
                    <div class="col-md-5">
                        <input type="text" placeholder="" class="form-control"/>
                    </div>
                    <div class="col-md-2">
                        <input type="hidden" class="form-control color-picker" value="#db913d">
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control icons-picker">
                    </div>
                    <div class="col-md-2">
                        <a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete">X
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-9 col-sm-offset-3">
        <a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add">
            <i class="fa fa-plus fa-fw fa-lg"></i> Add row</a>
    </div>
</div>

另一种方法是将 initEmpty 选项设置为 true：

start with an empty list of repeaters. Set your first (and only) "data-repeater-item" with style="display:none;" and pass the following configuration flag

片段：

$(".mt-repeater").repeater({
    initEmpty: true,
    show: function () {
        $(this).find('.color-picker').minicolors();
        $(this).slideDown();
    }
});

// create the first group
$('[data-repeater-create]').trigger('click');

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>

<div class="form-group mt-repeater">
    <div class="col-sm-4">
        <div data-repeater-list="group-c">
            <div data-repeater-item class="mt-repeater-item" style="display:none;">
                <div class="row mt-repeater-row">
                    <div class="col-md-5">
                        <input type="text" placeholder="" class="form-control"/>
                    </div>
                    <div class="col-md-2">
                        <input type="hidden" class="form-control color-picker" value="#db913d">
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control icons-picker">
                    </div>
                    <div class="col-md-2">
                        <a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete">X
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-9 col-sm-offset-3">
        <a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add">
            <i class="fa fa-plus fa-fw fa-lg"></i> Add row</a>
    </div>
</div>

jquery 内的颜色选择器在添加新行时重复器不起作用

colorpicker inside jquery repeater not work when add new row

html

javascript

jquery

repeater

twitter-bootstrap