ダイナミックフォームに新しい行を追加すると、新しい行にjsが機能しない

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を使って行を追加すると、新しい行では機能しません：

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

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

Answer 1

新たに追加されたDOM要素はバインドされていないため、これは機能しません。 JSを

に変更

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