未在隐藏输入值上调用的函数已更改 Jquery答案

【问题标题】：Function not called on hidden input value is changed Jquery未在隐藏输入值上调用的函数已更改 Jquery
【发布时间】：2019-04-10 06:25:22
【问题描述】：

我正在尝试获取所有隐藏输入字段的值并找到总和。隐藏字段属于 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"，并且当我手动更改该字段的值时，将调用该函数。为什么会这样？我想隐藏这个字段，并在其值更改时调用该函数。如何解决这个问题？请帮忙！

【问题讨论】：

乍看之下，doc.parent().parent('div') 似乎已关闭。链接.parent() 可能会出现问题；考虑.closest('.row')，它在DOM 中向上移动时，会找到最接近元素的class="row"
噢噢噢噢！我有什么问题吗？
仍在阅读：P 如果你做一个console.log(doc.parent('div').find('.mytotal').length) 你会得到什么？此外，.val() 不会触发更改，除非您执行 .val(...).trigger("change")（我认为）
很好，您尝试添加.trigger("change"); 吗？那应该触发on("change"...)监听器。
我相信@TimLewis 上面的第二点正确地确定了混乱的根源。 change 事件仅在 A) 用户更改输入值或 B) 您自己手动触发事件时触发致电.change() 或.trigger("change")。

标签： jquery html ajax laravel-5

【解决方案1】：

定义.on("change", ...) 函数就是所谓的侦听器，它会在某些东西“更改”时进行处理。在您的代码中，您正确地更改了值

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

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

要正确处理此问题，您只需在 .val() 更新后添加一个 .trigger() 函数即可：

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

【讨论】：