Bootstrap ColorPicker 无法处理动态创建的元素

Question

我的问题如下。我有一个添加文本输入的按钮。其中之一将保存颜色代码。为了获得更好的用户体验，我希望使用 Boostrap ColorPicker 插件选择该颜色。我的问题是，当我生成文本框时，文本框没有检测到插件，但是对于一个文本框，如果它检测到它，它就不是动态的。下面我放了一个 link 示例，其中包含带有固定文本框和动态生成它们的按钮的所有代码。提前致谢。

Link example

<!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>

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>
        `
        );

    });

Answer 1

添加 html 内容后，您需要再次运行颜色选择器：

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

    $('.cp-component').colorpicker();
});

Answer 2

我使用了棘手的解决方案：

HTML:

<div id="colorpicker_control_template" style="display: none">
    <div class="input-append color colorpicker-component" data-color="rgba(255,146,180,1)" data-color-format="rgba">
        <input type="text" class="input-medium" value="rgba(255,146,180,1)" readonly="">
        <span class="color_picker_trick">a</span><span class="add-on"><i style="background-color: rgba(255,146,180,1);"></i></span>
        <i class="btn add_new_picker" type="button" title="Add one more colorpicker">Add new</i>
        <i class="btn remove_picker" type="button" title="Remove this colorpicker">Remove</i>
    </div>
</div>

<div id="colorpicker_wrapper">
    <div class="input-append color colorpicker-component" data-color="rgba(255,146,180,1)" data-color-format="rgba">
        <input type="text" class="input-medium" value="rgba(255,146,180,1)" readonly="">
        <span class="color_picker_trick">a</span><span class="add-on"><i style="background-color: rgba(255,146,180,1);"></i></span>
        <i class="btn add_new_picker" type="button" title="Add one more colorpicker">Add new</i>
    </div>

CSS:

span.color_picker_trick {
background-color: rgba(255, 0, 0, 0);
opacity: 0;
position: absolute;
width: 26px;
height: 30px;
cursor: pointer; }

Js:

        $('div.colorpicker-component').colorpicker();

    var ColorPickedDom = null;
    $(document).ready(function () {

        // add new
        $("body div#colorpicker_wrapper").on('click', 'div.colorpicker-component i.add_new_picker', function() {
            var UploadTemplate = $('div#colorpicker_control_template').html();
            $('div#colorpicker_wrapper').append(UploadTemplate);
        });

        // remove clicked
        $("body div#colorpicker_wrapper").on('click', 'div.colorpicker-component i.remove_picker', function() {
            $(this).parent().closest('div.colorpicker-component').remove();
        });

        // the trick
        $('div#colorpicker_wrapper').on('click', 'div.colorpicker-component span.color_picker_trick', function(e) {
            ColorPickedDom = $(this).parent();
            $(ColorPickedDom).colorpicker('show');
        });

    });

Git 示例：https://github.com/CosmicLaca/multiple_bootstrap_colorpicker

Bootstrap ColorPicker 无法处理动态创建的元素

Bootstrap ColorPicker not working on dynamically created elements

jquery

twitter-bootstrap-3