Question

每当一个字段（所有相同类）的值发生变化时，我需要执行某些操作。它虽然不起作用。

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

我不确定为什么。我使用ID而不是类执行完全相同的操作，everytnig工作正常：

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

正确指定了类，因为在我的函数中我使用$('.payment-amount').val()并返回正确的值。它只是在与change()操作一起使用时才不起作用。

修改
我正在使用Yii2，因此相关Html的部分看起来像这样：

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

所以，根据jQuery api（提供的第一个例子）：

事件处理程序可以绑定到文本输入和选择框：
$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});
现在，当从下拉列表中选择第二个选项时，显示警报。 如果您更改字段中的文本然后单击“离开”，也会显示。如果字段失去焦点而内容没有但是，事件没有被触发。

在提供的示例中，尝试在输入中键入内容然后使其失去焦点（在其外部单击）。您将在控制台中看到键入的值。

＆＃13;

var paymentAmountInputs = $(".payment-amount");

paymentAmountInputs.change(function(evt) { 
    console.log($(this).val()) 
});

＆＃13;

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

＆＃13;

如果您想快速阅读输入值，您的解决方案将使用keydown：

＆＃13;

var paymentAmountInputs = $(".payment-amount");

paymentAmountInputs.keydown(function(evt) { 
    console.log($(this).val()) 
});

＆＃13;

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

＆＃13;

Change（）不会对类标识符做出反应

2 个答案: