但顏色選擇器字段不適用於添加的行,它只適用於第一行。
這是因爲顏色選擇器部分上下一行初始化....
根據文檔,你必須處理顯示選項回調:
$(".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:
開始與中繼器的空列表。用style =「display:none;」設置您的第一個(也是唯一) 「data-repeater-item」。並通過 以下配置標誌
的片段:
$(".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>