PICKR плагин выбора цвета. Динамически добавлять средства ввода и создавать экземпляры по классам, а не по идентификатору

Question

Я использую плагин pickr: https://github.com/Simonwep/pickr

В форме, где я могу динамически добавлять несколько полей ввода для сборщиков, я не знаю, как создать экземпляр каждого из них. Это работает только для первых. Я не могу использовать ID, только классы.

Плагин создан для создания отдельных входов. Но моей форме нужно добавить N. динамические входы (неизвестное количество)

jsfiddle, где создается только первый.

https://jsfiddle.net/dvx79gz1/2/

Я фактически вставляю этот код вфункция вызывается каждый раз, когда добавляется новая строка:

var pickr = Pickr.create({
        el: '.picker',
        theme: 'nano', // or 'monolith', or 'nano'
        useAsButton: true,
        comparison: false,
        swatches: [
            'rgb(244, 67, 54)',
            'rgb(233, 30, 99)',
            'rgb(156, 39, 176)',
            'rgb(103, 58, 183)',
            'rgb(63, 81, 181)',
            'rgb(33, 150, 243)',
            'rgb(3, 169, 244)',
            'rgb(0, 188, 212)',
            'rgb(0, 150, 136)',
            'rgb(76, 175, 80)',
            'rgb(139, 195, 74)',
            'rgb(205, 220, 57)',
            'rgb(255, 235, 59)',
            'rgb(255, 193, 7)'
        ],
        defaultRepresentation: 'HEX',
        lockOpacity: true,
        components: {

            // Main components
            preview: true,
            opacity: false,
            hue: true,

            // Input / output Options
            interaction: {
                hex: false,
                rgba: false,
                hsla: false,
                hsva: false,
                cmyk: false,
                input: true,
                clear: true,
                save: true
            }
        },

        strings: {
           save: 'Salva',  // Default for save button
           clear: 'Pulisci', // Default for clear button
           cancel: 'Annulla' // Default for cancel button
        }
    });

    pickr.on('show', (color, instance) => {
        instance.setColor($(instance._root.button).val(), true);
    }).on('save', (color, instance) => {
        $(instance._root.button).val(color.toHEXA().toString());
        instance.hide();
    });

Я хотел бы простым способом создать несколько входов только по классам. без идентификатора.

Кто-нибудь использует этот плагин?

ОБНОВЛЕНИЕ: Обновить скрипту (все еще не работает);https://jsfiddle.net/dvx79gz1/12/

Answer 1

Вы должны изменить селектор для каждого нового ввода, поэтому я добавил переменную вне функции new_row и вставляю ее каждый раз, когда нажимается кнопка, и я использую ее, чтобы добавить уникальный класс для каждого ввода, чтобы ваш код превратился в этот

    var picCounter = 0;

    function new_row() {
       picCounter++;
      //    ADD INPUT

     var newInput = $('<div class="divpicker"><input type="text" class="form-control picker field'+picCounter+'" value="#CCC" name="picker[]"/></div>');

  newInput.appendTo($("#divpickers"));

  //    INIT PICKR


  var newPicker = Pickr.create({
        el: '.field'+picCounter,
        theme: 'nano', // or 'monolith', or 'nano'
        useAsButton: true,
        comparison: false,
        swatches: [
            'rgb(244, 67, 54)',
            'rgb(233, 30, 99)',
            'rgb(156, 39, 176)',
            'rgb(103, 58, 183)',
            'rgb(63, 81, 181)',
            'rgb(33, 150, 243)',
            'rgb(3, 169, 244)',
            'rgb(0, 188, 212)',
            'rgb(0, 150, 136)',
            'rgb(76, 175, 80)',
            'rgb(139, 195, 74)',
            'rgb(205, 220, 57)',
            'rgb(255, 235, 59)',
            'rgb(255, 193, 7)'
        ],
        defaultRepresentation: 'HEX',
        lockOpacity: true,
        components: {

            // Main components
            preview: true,
            opacity: false,
            hue: true,

            // Input / output Options
            interaction: {
                hex: false,
                rgba: false,
                hsla: false,
                hsva: false,
                cmyk: false,
                input: true,
                clear: true,
                save: true
            }
        },

        strings: {
           save: 'Salva',  // Default for save button
           clear: 'Pulisci', // Default for clear button
           cancel: 'Annulla' // Default for cancel button
        }
    });



  newPicker.on('show', (color, instance) => {
        instance.setColor($(instance._root.button).val(), true);
    }).on('save', (color, instance) => {
        $(instance._root.button).val(color.toHEXA().toString());
        instance.hide();
    });

}

здесь рабочая скрипка https://jsfiddle.net/uyh0L3k9/1/