Kartik Select2 не работает после добавления его с помощью jquery

Question

У меня проблема с виджетом kartik select2.Я пытаюсь создать динамическую форму с помощью jquery.Сначала я создал два поля с kartik select2 в элементе div.Затем я клонировал все содержимое div и добавил его в div.Но клонированный select2 не работает, когда на него нажимают.Не могли бы вы помочь мне?

Код: коды в файле JavaScript:

$(document).ready(function(){
    $(document).on("click", "#add-department-btn", function(e){
      e.preventDefault();
      console.log("Clicked");

      var option_name = Math.random()*1000000;
      option_name = parseInt(option_name);
      var id = $(".add-departments-container .copyPattern").data('id');
      var row = $(".add-departments-container .copyPattern").clone().removeClass('copyPattern');

      row.appendTo(".add-departments-container");

      return false;
   });
});

_form.php file:

<div class="row">
                <a href="javacript:void(0)" id="add-department-btn">+ Qo'shish</a>
            </div>  
            <div class="add-departments-container">
                <?= Yii::$app->controller->renderPartial('department/_department', [
                    'departments' => $departments,
                    'allDepartments' => $allDepartments,
                    'model' => $newDepartments,
                    'university' => $model,
                    'allLevels' => $allLevels,
                    'class' => 'copyPattern'
                    ]); ?>
            </div> 

_department.php file:

<div class="<?= $class ?>" data-id="">
    <div class="row">
        <div class="col-md-5">
            <?= Html::label('Fakultet', 'University['. $id .'][departments]') ?>
            <?= Select2::widget([
                'name' => 'University['. $id .'][departments]',
                'value' => '',
                'data' => $allDepartments,
                'options' => ['placeholder' => 'Select department ...', 'id' => 'department-'.$id],
            ]); ?>
        </div>
        <div class="col-md-5">
            <?= Html::label('Levels', 'University['. $id .'][departments]') ?>
            <?= Select2::widget([
                'name' => 'University['. $id .'][levels]',
                // 'value' => ArrayHelper::getColumn($levels->departments, 'department_id'),
                'data' => $allLevels,
                'options' => ['multiple' => true, 'placeholder' => 'Select states ...', 'id' => 'university-levels-'.$id],
                'pluginOptions' => [
                        'allowClear' => true,
                        'tags'=>true,
                        'maximumInputLength'=>10,
                    ],
            ]); ?>
        </div>
        <div class="col-md-2">
            <a href="javacript:void(0)" id="delete-department-btn">Delete</a>
        </div>
    </div>
</div>

Answer 1

Вы можете решить эту проблему, выполнив несколько хитростей:

1) Вы можете передать ajax-запрос на действие, возвращающее HTML-виджет select2, также вы можете создать действие ajax, которое будет возвращать ваш табличный код при каждом нажатии кнопки.... это будет работать в обоих случаях.Этот пример из реального проекта (этот пример, если построить страницу ajax для полной табличной страницы):

public function actionGetCcForm($index)
    {
        $model              = new CalculatorsForm;
        return $this->renderAjax('calculators/_cc_foods_tabular', [
            'index' => $index,
            'model' => $model
        ]);
    }

// view page
<?php
$tabularAjax = Url::toRoute('/nutritionfacts/get-cc-form', true);
$this->registerJs(<<<JS
    $(document).on('click', '#add-new-meal',function(e) {  
        $.ajax({
           url: '$tabularAjax',
           data: {'index': currentIndex},
           success: function(data) {
               $('#_cc_foods_tabular').append(data);
           }
        });
    });
JS
, \yii\web\View::POS_END) ?>

// _cc_foods_tabular - this page will contain form
<div class="col-xs-10 col-md-3 form-group">
        <?php
            echo Select2::widget([
                'model' => $model,
                'attribute' => "[{$index}]food_id",
                'data' => $foodDependanceOfCat,
            ]);
        ?>
    </div>

2) Вы можете вернуть данные select2 для просмотра (действие рендеринга), например render(..., ['select2Data' => $yourSelect2Data]), а затем создать select2 с помощьюjs like

$('#you-news-id-select').select2();

Примечание: эта проблема возникает, поскольку каждый select2 имеет уникальный идентификатор, этот идентификатор был инициирован и назначен для созданного выбранного ....