Change（）はクラス識別子と反応しません

Question

1つのフィールド（すべての同じクラス）の値が変更されるたびに、特定のアクションを実行する必要があります。しかし、それは動作しません。

$('.payment-amount').change(function() { 
     ajax_get_supposed_money_left(); 
    }); 

理由はわかりません。

$('#tripsummary-money_begin').change(function() { 
     ajax_get_supposed_money_left(); 
    }); 

私の関数の中で、私は$('.payment-amount').val()を使用して、それが正しい値を返すため、クラスが正しく指定されている：私の代わりにクラスとeverytnigのIDと全く同じ動作が正常に動作しません。 change()アクションで使用すると動作したくないだけです。

EDIT：
私はYii2を使用していますので、関連するHTML形式の一部は次のようになります。jQuery api（設けられた第一の例）によると、そう

DynamicFormWidget::begin([ 
    'widgetContainer' => 'dynamicform_wrapper_expenses', // required: only alphanumeric characters plus "_" [A-Za-z0-9_] 
    'widgetBody' => '.container-expenses', // required: css class selector 
    'widgetItem' => '.item-expense', // required: css class 
    'limit' => 99, // the maximum times, an element can be cloned (default 999) 
    'min' => 0, // 0 or 1 (default 1) 
    'insertButton' => '.add-item-expense', // css class 
    'deleteButton' => '.remove-item-expense', // css class 
    'model' => $expense_models[0], 
    'formId' => 'expense-create-form', 
    'formFields' => [ 
     'amount', 
     'category', 
     'comment', 
    ], 
]); 
?> 
<div class="panel-body container-items"> 
    <div class="panel-heading font-bold"> 
     <button type="button" class="pull-left add-item-expense btn btn-success btn-xm"><i class="fa fa-plus"></i> <?= Yii::t('app', 'Add') ?></button> 
     <div class="clearfix"></div> 
    </div> 
    <div id="payments-container" class="panel-body container-expenses"><!-- widgetContainer --> 
     <?php foreach ($expense_models as $index => $model): ?> 
      <div class="item-expense"><!-- widgetBody --> 
       <div> 
        <?php 
        // necessary for update action. 
        if (!$model->isNewRecord) { 
         echo Html::activeHiddenInput($model, "[{$index}]id"); 
        } 
        ?> 
        <div class="row"> 
         <div class="col-md-3"> 
          <?= 
          $form->field($model, "[{$index}]amount")->textInput(['class' => 'form-control payment-amount'])->label(Yii::t('app', 'Amount')) 
          ?> 
         </div> 
         <div class="col-md-3"> 
          <?= 
          $form->field($model, "[{$index}]trip_summary_category_id")->dropDownList(ArrayHelper::map(TripSummaryCategory::find()->all(), 'id', 'name'), [ 
           'class' => 'form-control payment_type', 
          ])->label(Yii::t('app', 'Category')) 
          ?> 
         </div> 
         <div class="col-md-3" > 
          <?= 
          $form->field($model, "[{$index}]comment")->textInput()->label(Yii::t('app', 'Comment')); 
          ?> 
         </div> 
         <button type="button" class="custom-remove-btn remove-item-expense btn btn-danger glyphicon glyphicon-remove"></button> 
        </div><!-- end:row --> 
       </div> 
       <div class="custom-divider"></div> 
      </div> 
     <?php endforeach; ?> 
    </div> 
    <?php DynamicFormWidget::end(); ?> 
</div> 

Answer 1

最後に。当初は.payment-amountクラスのフィールドがないので、コードは私が望むように実行できませんでした。これを防ぐために私が使用します。

$('body').on('change', '.payment-amount', function() { 
     console.log($(this).val()); 
     // rest of code 
    }); 

Answer 2

：

イベントハンドラは、入れて、選択ボックス：第二の選択肢は、ドロップダウンから選択されたときに

$(".target").change(function() { 
    alert("Handler for .change() called."); 
}); 

は今、 警告が表示されます。 フィールド内のテキストを変更してから、それをクリックすると表示されます。 の内容を変更してもフィールドのフォーカスが失われても、イベントはトリガーされません。

例では、入力に何かを入力し、フォーカスを失うようにしてください（外側をクリックしてください）。コンソールに入力された値が表示されます。

var paymentAmountInputs = $(".payment-amount"); 
 

 
paymentAmountInputs.change(function(evt) { 
 
    console.log($(this).val()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
 
<input type="text" class="payment-amount" value="0" />

あなたはその場上の入力値 を読みたい場合はあなたのソリューションは​​を使用することでしょう

：私は答えを見つけた

var paymentAmountInputs = $(".payment-amount"); 
 

 
paymentAmountInputs.keydown(function(evt) { 
 
    console.log($(this).val()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
 
    <input type="text" class="payment-amount" value="0" />