Функция, не вызываемая при скрытом входном значении, изменяется. Jquery

Question

Я пытаюсь получить значения всех скрытых полей ввода и найти сумму. Скрытое поле имеет класс mytotal . Ниже приведен код:

<div class="row">
 <div class="col-md-2">
     <label for="brnos[]" class="control-label" style="width:100%">BR-NO</label>
     <input class="form-control mybrands" type="text" style="width:100%;text-align: center;" name="brnos[]" autocomplete="off" required>
     <div id="brList" style="width:auto;"></div>
 </div>
 <div class="col-md-2">
     <label for="cases[]" class="control-label" style="width:100%">Cases</label>
     <input id="cases" class="form-control mycases" type="number" style="width:100%;text-align: center;" name="cases[]" value="0" autocomplete="off" required>
     <input class="form-control mytotal" type="hidden" style="width:100%;text-align: center;" name="mytotal" value="0">
 </div>
</div>

Я использую функцию, чтобы установить значение моего скрытого поля, используя функцию ajax, и она отлично работает. Ниже приведен код:

$(document).ready(function() {
        var doc;
        $(document).on("change", ".mycases", function() {
            doc = $(this);
            var value = doc.parent().parent('div').find('.mybrands').val();
            var cases = doc.val();
            var total_cases = $("#total_cases");
            if(value!='')
            {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    url: "{{ route('origin.find') }}",
                    type: 'POST',                  
                    data: {_token: CSRF_TOKEN,value:value},
                    success:function(data)
                    {
                       doc.parent('div').find('.mytotal').val(data.output*cases);
                    }
                });
            }
        });
    });

Я пытался предупредить значение .mytotal после изменения его значения внутри функции ajax, и оно показывает ожидаемое значение. Но когда я вызываю другую функцию ajax, чтобы найти сумму значений входов, которые имеют класс "mytotal" никогда не называется. Ниже мой код:

$(document).ready(function() {
        $(document).on("change", ".mytotal", function() {
            var sum = 0;
            $(".mytotal").each(function(){
                sum += +$(this).val();
                window.alert(sum);
            });
        });
    });

Таким образом, вместо того, чтобы сделать это скрытым полем, я сделал это как type = "number", и когда я вручную изменяю значение этого поля, вызывается функция. Почему это происходит? Я хочу сделать это поле скрытым и вызывать функцию при изменении его значения. Как это решить? Пожалуйста, помогите!

Answer 1

Определение функции .on("change", ...) - это то, что известно как слушатель, который обрабатывает, когда что-то «изменяется». В своем коде вы корректно меняете значение с помощью

doc.parent('div').find('.mytotal').val(data.output*cases);

Но на самом деле это не вызывает событие, которое обрабатывается вашим слушателем.

Чтобы правильно справиться с этим, все, что вам нужно сделать, это добавить функцию .trigger() после обновления .val():

doc.parent('div').find('.mytotal').val(data.output*cases).trigger("change");