Добавление новой строки в динамической форме yii2, в новой строке js не работает

У меня есть случай управлять динамическим входом в 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); ?> 

Недавно добавленный элемент DOM не связан, и поэтому он не работает. Изменить JS на

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