colorpicker inside jquery repeaterが新しい行を追加すると動作しない

Question

私はブートストラップと互換性のあるカラーピッカーのサードパーティ製プラグインを使用しています。このピッカーフィールドはリピータに追加されていますので行を追加して削除できます 私は以下

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

が、カラーピッカーのフィールドのようなプラグインは、それが最初の行のみで動作し、追加の行に対して機能しません。 codepenのデモを確認してください。行追加ボタンをクリックしてからカラーピッカーをクリックしてください。https://codepen.io/anon/pen/ZexeYj どうすればこの問題に対処できますか？新しい列を追加した後にミニカラーをもう一度呼び出そうとすると、何かが間違っていました。

Answer 1

カラーピッカーフィールドは追加された行に対しては機能しませんが、最初の行にのみ機能します。この方法では

$(".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>

別のアプローチは、trueにinitEmptyオプションを設定されています。リピーターの空のリストと

スタート。最初の（そして唯一の） "data-repeater-item"をstyle = "display：none;"に設定してくださいそして、設定フラグ

スニペット以下 を渡す：

$(".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>