Kartik Select2 在使用 jquery 附加后无法正常工作

Question

我对 kartik select2 小部件有疑问。我正在尝试使用 jquery 创建动态表单。首先，我在 div 元素中使用 kartik select2 创建了两个字段。然后我克隆了 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 文件：

<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 文件：

<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) 你可以像render(..., ['select2Data' => $yourSelect2Data])一样返回select2数据在(render action)中查看，然后像js一样通过js创建select2

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

注意：这个问题的发生是因为每个 select2 都有一个唯一的 id，这个 id 已经被触发并分配给创建的选定......