在模态显示上触发 onchange 事件的问题答案

【问题标题】：Issue with onchange event firing on modal show在模态显示上触发 onchange 事件的问题
【发布时间】：2020-10-09 13:30:59
【问题描述】：

我有一个“销售订单项目”模式，允许用户从选择列表中选择产品。当用户选择产品时，我会使用 onChange 事件通过 Ajax 将相关数据从产品源数据库加载到模式上的其他输入中（即产品描述和成本价格）。

这在创建订单项时可以正常工作，但是当用户尝试编辑订单项时，在显示模式时会触发 onChange 事件，导致相关数据通过 Ajax 重新加载，但用户可能已经更改了原始数据，所以数据总是恢复到原来的状态。

例如，项目 ABC123 的成本价默认为 10 英镑，但对于这个特定的销售订单，用户以 8 英镑采购它，因此当用户创建新的“销售订单项目”并选择项目 ABC123 时，成本价默认为 10 英镑，但用户随后手动将其更改为 8 英镑（仅限此销售订单项目！）。然后，稍后，如果他们尝试编辑此“销售订单项目”，则会重新加载默认值并恢复为 10 英镑。

请在下面查看我的 onchange 代码：

    $(document).on('change', '#qsjob-cat', function(){
      var newVal = $('#qsjob-cat').val();
        $.ajax({ url: "AjaxGetData.wc?ti=cat;cat&fl=title&key=cat:C:"+newVal ,
           type: "POST",
           success: function(data) {
            data = decodeURIComponent(data);
            $('#qsjob-des').val(data);
           }
        });     
    });

不确定它是否重要，但是，我正在使用 Jquery 的 DataTables & Editor 插件。

我怀疑 onchange 事件会触发，因为 DataTable\Editor 可能会将数据插入到模态显示的每个元素中，但我不确定如何实现我的目标？

我确信对此有一个明显的答案，但我对 JS 比较陌生......很多要学习 ;-)

非常感谢任何建议。

谢谢，克里斯

【问题讨论】：

标签： javascript jquery ajax datatables onchange

【解决方案1】：

如果您事先知道某个项目是否正在创建或编辑，那么如果您知道该项目正在编辑，则可以“忽略”第一个 onchange 事件。

let isEditing = true; // if you know that you are editing
let shouldFire = false;

$(document).on('change', '#qsjob-cat', function(){
  if (isEditing && !shouldFire) {
    shouldFire = true; // sets it so it fires the next time
    return; // returns without firing this time
  }

  var newVal = $('#qsjob-cat').val();
  $.ajax({ url: "AjaxGetData.wc?ti=cat;cat&fl=title&key=cat:C:"+newVal ,
    type: "POST",
    success: function(data) {
      data = decodeURIComponent(data);
      $('#qsjob-des').val(data);
    }
  });     
});

或者，您可以只在模型中填写类型，然后加载并填写默认值（例如 10$），然后填写用户的 8$ 自定义值。

【讨论】：

谢谢 SwiftLynx，我会试试看 :)