Adding new row in dynamic form yii2, in new row, js is not work

问题

I have a case to manage a dynamic input in yii2. So I choose this extension : wbraganca

This is my code :

<?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>

Please see in this pieces of code above :

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

The question is, I have a register js, but why this js have work only just once, which is the first row, when I adding a row using wbraganca, it not works in new row:

This is my js

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

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

回答1:

Newly added DOM element is not bound and this is why it's not working. Change JS to

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

来源：https://stackoverflow.com/questions/40359512/adding-new-row-in-dynamic-form-yii2-in-new-row-js-is-not-work