jquery - обновить значение на основе данных json + значение из поля ввода

Question

У меня есть шаблон колбы, который создает 4 формы с полями ввода суммы + метки, которые должны содержать цену, основанную на значении из поля ввода * значения, которые я получаю как json из фрагмента REST: html:

<div class="mbr-overlay" style="opacity: 0.2; background-color: rgb(35, 35, 35);">
</div>

<div class="container">
    <div class="media-container-row">
        {% for currency in currencies %}
        <div class="card  col-12 col-md-6 col-lg-4">
            <div class="card-img">
                <p><img src="/assets/images/logo_{{ currency.name }}.png" height="128" width="128" /></p>
            </div>
            <div class="card-box align-center">
                <form id="{{ currency.unit }}" name="buy" class="{{ currency.unit }}" method="POST" action="/buy">
                    <p>
                        <!-- do not change the ID here -->
                        <input id="{{ currency.unit }}" name="amount" class="input" type="number" max="{{ currency.max }}" min="{{ currency.min }}" value="{{ currency.min }}" step="1" required /> {{ currency.buy_unit }}
                        <input id="currency" name="currency" type="hidden" value="{{ currency.name }}" />
                        <input id="unit" name="unit" type="hidden" value="{{ currency.unit }}" />
                        <input id="buy_unit" name="buy_unit" type="hidden" value="{{ currency.buy_unit }}" />
                    </p><p>
                        <div class="mbr-section-btn text-center">
                            <input id="submit" name="submit" class="btn btn-secondary display-4" type="submit" value="Koupit" />
                        </div>
                        <span class="price">Cena: {{ currency.price }}</span>
                    </p>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

Фрагмент jquery:

<script>
var formatter = new Intl.NumberFormat('cs-CZ', { style: 'decimal', maximumFractionDigits: 0, });

$(document).on('mouseenter mouseleave change input submit', '.input', function(){
  var par = $(this);
  var val = $(this).val();
  var idx = $(this).attr('id');

$.ajax({
  type: "GET",
  url: "/exchange_rates",
  dataType: 'json',
  success: function(response){
             var obj = response;
             par.closest('p').siblings('p').find('span.price').html(formatter.format((obj[idx] * val)/1000) + ' Kč');
             par.closest('p').siblings('p').find('span.price').css({"color": "green", "font-weight": "bold"});
             console.log("index:    " + idx);
             console.log("value:    " + val);
             console.log("obj[idx]: " + obj[idx]);
             console.log("sum:      " + (obj[idx] * val)/1000);
    }
  });             
});

$(document).ready(function(){
  $(".input").trigger("input");
});

Как мне изменить его, чтобы значения корректно обновлялись в соответствии со значениями и стилем CSS?

Заранее спасибо.

Answer 1

Ответ от Элиаса Мейсона на jquery .on change не вызывает был достаточно вдохновляющим, хотя он все еще не работает для меня, как ожидалось, я не думаю, что кто-то хотел бы ответить на негоПоэтому я бы хотел закрыть эту тему.