0

Mi problema es el siguiente.Tengo un botón que añade inputs de textos.Uno de ellos guardara un código de color.Para una mejor experiencia de usuario deseo que ese color pueda elegirse con el plugin Boostrap ColorPicker.Mi problema es que cuando genero las cajas de texto no me detecta el plugin,sin embargo para una caja de texto que no es generada dinamicamente si lo detecta.Abajo pongo link de un ejemplo con todo el código con la caja de texto fija y el botón que las genera dinamicamente.Gracias de antemano. Enlace ejemplo

introducir la descripción de la imagen aquí

<!DOCTYPE html>
<html>
 
<head>
  <title>Colorpicker using Bootstrap 3</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css"
    rel="stylesheet">
 
  <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
</head>
 
<body>
  <div class="col-md-2 col-md-offset-6">
    <label for="">Example picker</label>
    <div id="" class="cp-component input-group">      
        <input type="text" value="#269faf" class="form-control" />
        <span class="input-group-addon"><i></i></span>
    </div>
  </div>
   <div class="col-xs-12 col-md-6">
        <input type="button" value="Add" class="btn btn-azul"                         id="insertar_intervalo">
   <div class="intervalos">
     
   </div>
  </div>
 


</body>
 
</html>

archivo js

  $('.cp-component').colorpicker();
    var contador = 0;
    $(document.body).on('click', '#insertar_intervalo', function (e) {
        contador = contador + 1;
        $('.intervalos').append(
            `
                            <div class="well well-sm contenedor-intervalos"id="contenedor-intervalo-${contador}">
                                <div class="row fila-contenido-evaluaciones">
                                    <div class=" col-md-4">
                                        <label for="">Desde</label>
                                        <input type="text"name="desdes[]"class="desdes form-control">
                                    </div>
                                    <div class=" col-md-4">
                                        <label for="">Hasta</label>
                                        <input type="text"name="hastas[]"class="hastas form-control">
                                    </div>
                                    <div class=" col-md-4">
                                        <label for="">Color</label>
                                      <div id="cp-component-${contador}" class="cp-component input-group">
                                          <input type="text" value="#269faf" class="form-control" />
                                          <span class="input-group-addon"><i></i></span>
                                      </div>
                                    </div>
                                </div>
                            </div>
        `
        );

    });

1 respuesta 1

0

Tu error es muy simple, únicamente generas el componente colorpicker al inicio de tu script, y toma los elementos que cumplen tu selector y los convierte a ese componente, pero no va a convertir si agregas componentes después. Por lo que tienes que seguir llamando a tu función para que tome de nuevo y genere tus componentes nuevos.

Te dejo el único cambio que realice a tu código y el link de el fork de tu ejemplo con la corrección

$('.cp-component').colorpicker();
var contador = 0;
$(document.body).on('click', '#insertar_intervalo', function (e) {
  .
  .
  .
  .
  //llamarlo en cada que agrega un elemento dinámico.
  $('.cp-component').colorpicker();
});

https://codepen.io/eduardojl-the-reactor/pen/rNMNzdX

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.