未对隐藏的输入值调用未更改的函数

时间:2018-11-06 19:53:15

标签: jquery html ajax laravel-5

我正在尝试获取所有隐藏输入字段的值并找到总和。 隐藏字段属于 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);
                    }
                });
            }
        });
    });

我尝试在ajax函数中更改 .mytotal 的值后发出警报,它显示了预期值。但是当我调用另一个ajax函数以查找输入值之和时,具有“ mytotal”类,因此永远不会调用。下面是我的代码:

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

因此,不是将其设置为隐藏字段,而是将其设置为type =“ number”,并且当我手动更改该字段的值时,将调用该函数。为什么会这样呢?我想隐藏此字段,并在更改其值时调用该函数。如何解决呢?请帮忙!

1 个答案:

答案 0 :(得分:2)

定义.on("change", ...)函数是所谓的侦听器,用于处理某些“更改”的事件。在您的代码中,您可以使用正确地更改值

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

但这实际上不会触发您的侦听器处理的事件。

要正确处理此问题,您所需要做的就是在.trigger()更新之后添加一个.val()函数:

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