बदलें() कक्षा पहचानकर्ता

Question

के साथ प्रतिक्रिया नहीं करता है जब भी एक फ़ील्ड (सभी समान वर्ग) के मान बदलते हैं तो मुझे कुछ कार्यवाही करने की आवश्यकता होती है। हालांकि यह काम नहीं करता है।

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

मुझे यकीन नहीं है कि क्यों। मैं बजाय आईडी वर्ग और everytnig साथ बिल्कुल वैसा ही कार्रवाई ठीक काम करता है कार्य करें:

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

वर्ग को सही ढंग से निर्दिष्ट किया जाता है, क्योंकि मेरे समारोह में मैं $('.payment-amount').val() उपयोग करें और यह सही मान वापस जाएँ। change() कार्रवाई के साथ उपयोग किए जाने पर यह केवल काम नहीं करना चाहता है।

संपादित करें:
मैं Yii2 उपयोग कर रहा हूँ, इसलिए प्रासंगिक एचटीएमएल का हिस्सा इस तरह दिखता है:

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

मैं इस सवाल का जवाब मिल गया आखिरकार। चूंकि बहुत शुरुआत में कोई पेमेंट-रकम क्लास-युक्त फ़ील्ड नहीं है, इसलिए कोड को जिस तरह से मैं चाहता था उसे निष्पादित नहीं किया जा सका। इसे रोकने के लिए मैं का उपयोग करें:

$('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."); 
}); 

अब जब दूसरा विकल्प ड्रॉप-डाउन से चुना जाता है, चेतावनी प्रदर्शित किया जाता है। यदि आप फ़ील्ड में टेक्स्ट बदलते हैं और फिर क्लिक करते हैं तो यह भी प्रदर्शित होता है। यदि क्षेत्र वाले सामग्री के बिना फ़ोकस खो देता है, हालांकि, ईवेंट ट्रिगर नहीं किया गया है।

उदाहरण के लिए, इनपुट में कुछ टाइप करने का प्रयास करें और फिर इसे फोकस करें (इसके बाहर क्लिक करें)। आपको कंसोल में टाइप किया गया मान दिखाई देगा।

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

आपका समाधान keydown का उपयोग करेंगे आप मक्खी पर इनपुट मूल्य पढ़ना चाहते हैं:

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