Function not called on hidden input value is changed Jquery

I'm trying to get the values of all the hidden input fields and find the sum. Hidden field is of class mytotal. Below is the code:

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

I use a function to set the value of my hidden field using an ajax function and it works fine. Below is the code:

$(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: "",
                    type: 'POST',                  
                    data: {_token: CSRF_TOKEN,value:value},
                    success:function(data)
                    {
                       doc.parent('div').find('.mytotal').val(data.output*cases);
                    }
                });
            }
        });
    });

I tried to alert the value of .mytotal after changing its value inside ajax function and it shows the expected value.But when i call another ajax function to find the sum of the values of inputs that have class "mytotal" it is never called. Below is my code:

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

So instead of making it hidden field, I made it as type="number" and when I change the value of that field manually the function is called. Why is this happening? I want to make this field hidden and the function to be called when its value is changed. How to solve this? Please help!

via Chebli Mohamed