Change() doesn't react with class identifier

Question

I need to do certain action whenever value of one field (all the same class) changes. It doen't work though.

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

I'm not sure why. I do the exactly same action with ID instead of class and everytnig works fine:

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

The class is specified correctly, because in my function I use $('.payment-amount').val() and it return the correct value. It only doesn't want to work when used with change() action.

EDIT:
I'm using Yii2, so the part of relevant 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 found the answer finally. Since there is no .payment-amount class-having fields at the very beginning, the code couldn't be executed the way 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 (first example provided):

The event handler can be bound to the text input and the select box:

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

Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered.

In example provided, try to type something in the input and then make it lose focus (click outside of it). You will see value typed 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 would be using 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" />