Копирование виджетов yii2

[mivanov]

Задача следующая. Есть два виджета. Эти виджеты должны копироваться по кнопке "добавить". Само "копирование" виджетов происходит. Однако(!) на "вновь появившихся" инпутах js не работает.

Вопрос как заставить работать js на всех инпутах которые добавляются по кнопке "добавить"?

JS код:

Код: Выделить всё

$(document).ready(function () {
   $(document).on('click', '.add-product', function (){
      $(".product").clone().appendTo(".form-product-items");
   })
});

PHP код:

Код: Выделить всё

<section class="main-content form-product-items">
    <div class="container form-product-item">
        <div class="row">
            <div class="col-lg-6">
                <?php
                echo $form->field($model, 'category')->widget(Select2::classname(), [
                    'data' => [],
                    'options' => ['placeholder' => 'Категория'],
                    'pluginOptions' => [
                        'allowClear' => true,
                        'tags' => true
                    ],
                ]);
                ?>
            </div>

            <div class="col-lg-6">
                <?php
                echo $form->field($model, 'product')->widget(Select2::classname(), [
                    'data' => [],
                    'options' => ['placeholder' => 'Продукт', 'multiple' => true],
                    'pluginOptions' => [
                        'tags' => true
                    ]
                ]);
                ?>
            </div>

            <div class="col-lg-2"></div>
            <div class="col-lg-2"></div>
            <div class="col-lg-2"></div>
            <div class="col-lg-2"></div>
            <div class="col-lg-2"></div>
            <div class="col-lg-2">
                <?= Html::button('Добавить', ['class' => 'btn btn-primary btn-block add-product w-100']) ?>
            </div>
        </div>
    </div>
</section>

[caHek2x]

вы копируете и id/name остаются дублированные, это не хорошо ...
сейчас при подобной задаче я с сервера подгружаю вьюху через ajax и код читабельнее и париться с js не приходится все отрабатывает само ... в случае копирования как у вас надо заново проинициализировать select2 ну и id name изменить на уникальный ...
раньше делал так:

_geo_unit.php:

Код: Выделить всё

<?php 

use app\modules\rubetek\models\RubetekUnitsKeys;
use kartik\form\ActiveForm;
use kartik\widgets\Select2;

/* @var $this yii\web\View */
/* @var $form ActiveForm */
/* @var $link RubetekUnitsKeys */
/* @var $i integer */
?>
<div>
    <?= $form->field($link, "[$i]geo_unit_id")->widget(Select2::class, [
        'initValueText' => $link->unit ? $link->unit->getFullName() : null,
        'pluginOptions' => [
            ...
        ],
    ]); ?>
</div>

ну и там где сама форма:

Код: Выделить всё

<div class="card">
    <div class="card-header bg-primary">
        Адреса
    </div>
    <div class="card-body js_geo_units">
        <?php foreach ($key->unit_links as $i => $link): ?>
            <?= $this->render('_geo_unit', ['link' => $link, 'form' => $form, 'i' => $i]) ?>
        <?php endforeach; ?>
    </div>
    <div class="card-footer">
        <button type="button" class="btn btn-sm btn-primary js_add_geo_unit">Добавить</button>
        <script>
            $(function () {
                $(".js_add_geo_unit").click(function () {
                    if (window.next_id === undefined) window.next_id = 5000;
                    window.next_id++;

                    <?php $template = $this->render('_geo_unit', ['link' => new RubetekUnitsKeys(), 'form' => $form, 'i' => "___id___"]); ?>
                    let $template =<?=json_encode($template)?>;
                    $template = $($template.replace(/___id___/g, window.next_id));

                    let $container = $(".js_geo_units");
                    $container.append($template);
                    $template.hide().show('fast', function () {
                        $template.find("select").each(function () {
                            let element = $(this);
                            $.when(element.select2(window[element.data('krajee-select2')])).done(initS2Loading(element.attr('id'), element.data('s2-options')));
                        });
                    });
                });
            });

        </script>
    </div>
</div>