colorpicker à l'intérieur jquery répéteur ne fonctionne pas lorsque ajouter une nouvelle ligne

Question

J'utilise un plugin tiers pour le sélecteur de couleur compatible avec bootstrap, ce champ de sélecteur ajouté dans un répéteur afin que je puisse ajouter des lignes et supprimer comme je peux Je lance la plugin comme les suivantes

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

mais le champ de sélecteur de couleur fonctionne pas pour les lignes ajoutées, il ne fonctionne que pour la première ligne. vérifier la démo sur codepen essayer de cliquer sur le bouton ajouter une ligne puis sur le sélecteur de couleurs https://codepen.io/anon/pen/ZexeYj comment puis-je faire face à ce problème? quand j'essaie d'appeler à nouveau les minicolores après avoir ajouté une nouvelle ligne, quelque chose s'est mal passé.

Answer 1

mais le champ sélecteur de couleur ne fonctionne pas pour les lignes ajoutées, il ne fonctionne que pour la première ligne.

Cela arrive parce que le sélecteur de couleur est partiellement initialisé sur les prochaines lignes ....

Selon jquery.repeater la documentation que vous devez gérer la montrer rappel option:

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

Dans cette méthode vous pouvez détruire les minicolores actuels et en initialiser un nouveau.

extrait de travail:

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

Une autre approche est réglage sur l'option initEmpty true:

départ avec une liste vide de répéteurs. Définissez votre premier (et unique) "data-repeater-item" avec style = "display: none;" et passer le drapeau suivant de configuration

L'extrait:

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