Question

我有一个案例来管理yii2中的动态输入。所以我选择了这个扩展名：wbraganca

这是我的代码：

<?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>
<div class="row">
    <div class="col-md-8">
        <div class="padding-v-md">
            <div class="line line-dashed"></div>
        </div>

        <?php
        DynamicFormWidget::begin([

            'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
            'widgetBody' => '.container-items', // required: css class selector
            'widgetItem' => '.item', // required: css class
            'limit' => 10, // the maximum times, an element can be cloned (default 999)
            'min' => 1, // 0 or 1 (default 1)
            'insertButton' => '.add-item', // css class
            'deleteButton' => '.remove-item', // css class
            'model' => $modelsTransactionDetail[0],
            'formId' => 'dynamic-form',
            'formFields' => [
                'item_id',
                'karyawan_id',
                'harga_jual',
                'jumlah_jual',
                'subtotal'
            ],
        ]);
        ?>

        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-money"></i> Item Pembelian
                <div class="clearfix"></div>
            </div>

            <div class="panel-body"><!-- widgetContainer -->

                <table class="table table-bordered table-striped container-items">
                    <thead>
                        <tr>
                            <th style="width: 30%">Item</th>
                            <th style="width: 15%">By</th>
                            <th style="width: 18%">Harga</th>
                            <th style="width: 8%">Qty</th>
                            <th style="width: 25%">Sub Total</th>
                            <th class="text-center" style="width: 5%">Act</th>
                        </tr>

                    </thead>
                    <tbody>
                        <?php foreach ($modelsTransactionDetail as $indexTools => $modelTools): ?>
                            <tr class="item">
                                <td class="vcenter">

                                    <?=
                                    $form->field($modelTools, "[{$indexTools}]item_id")->label(false)->dropDownList(
                                            ArrayHelper::map(ItemLayanan::find()->all(), 'id', 'nama_item'), ['prompt' => 'Select item', 'class' => 'item_id']
                                    )
                                    ?>
                                </td>
                                <td class="vcenter">

                                    <?=
                                    $form->field($modelTools, "[{$indexTools}]karyawan_id")->label(false)->dropDownList(
                                            ArrayHelper::map(Karyawan::find()->all(), 'id', 'nama_karyawan'), ['prompt' => 'Select Karyawan']
                                    )
                                    ?>
                                </td>
                                <td class="vcenter">
                                    <?= $form->field($modelTools, "[{$indexTools}]harga_jual")->label(false)->textInput(['maxlength' => true]) ?>
                                </td>
                                <td class="vcenter">
                                    <?= $form->field($modelTools, "[{$indexTools}]jumlah_jual")->label(false)->textInput(['maxlength' => true]) ?>
                                </td>
                                <td class="vcenter">
                                    <?= $form->field($modelTools, "[{$indexTools}]subtotal")->label(false)->textInput() ?>
                                </td>
                                <td class="text-center vcenter" style="width: 90px;">
                                    <button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="5"></td>
                            <td><button type="button" class="add-item btn btn-success btn-sm"><span class="fa fa-plus"></span> New</button></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <?php DynamicFormWidget::end(); ?>
    </div>

请参阅上面这段代码：

 <?=
    $form->field($modelTools, "[{$indexTools}]item_id")->label(false)->dropDownList(
          ArrayHelper::map(ItemLayanan::find()->all(), 'id', 'nama_item'), ['prompt' => 'Select item', 'class' => 'item_id']
        )
  ?>

问题是，我有一个寄存器js，但是为什么这个js只工作一次，这是第一行，当我使用wbraganca添加一行时，它不适用于新行：

这是我的js

<?php
 $js = <<<'EOD'

     $(".item_id").on('change',function () {
         alert();
     });
 EOD;
 $this->registerJs($js);
 ?>

Answer 1

新添加的DOM元素没有绑定，这就是它无法正常工作的原因。将JS更改为

$("body").on("change", ".item_id", function () {

在动态形式yii2中添加新行，在新行中，js不起作用

1 个答案: