Change () does not respond with class id

Question

I need to perform a certain action when the value of one field changes (all the same class). However, it does not work.

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

I'm not sure why. I am doing the same thing with an identifier instead of a class, and each tnig works fine:

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

The class is set correctly, because in my function I use $('.payment-amount').val() and returns the correct value. It only works when used with the change() action.

EDIT:

I use Yii2, so part of the corresponding Html looks like this:

 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

I finally found the answer. Since at the beginning there are no fields of the number class, the size of which cannot be performed as I wanted. To prevent this, I use:

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

Answer 2

So, according to jQuery api (in the first example):

An event handler can be bound to text input in the selection field:

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

Now that the second option is selected from the drop-down list, a warning is displayed. It also appears if you change the text in the field and then click away. If a field loses focus without content that has been changed, however, the event does not fire.

In the above example, try typing something in the input, and then lose focus (click outside). You will see the value entered in the console.

 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" /> 

Your solution will use keydown if you want to read the input value on the fly:

 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" />