在模态显示中触发 onchange 事件的问题

Question

我有一个 'Sales Order Item' 模式，允许用户从 Select 列表中 select 产品。当用户 select 购买产品时，我会使用 onChange 事件通过 Ajax 将相关数据从产品源数据库加载到模式上的其他输入（即产品描述和成本价）。

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

例如，商品 ABC123 的成本价默认为 10 英镑，但对于这个特定的销售订单，用户采购它的价格为 8 英镑，因此当用户创建新的 'sales order item' 和 selected 项目 ABC123，成本价默认为 10 英镑，但用户随后手动将其更改为 8 英镑（仅适用于此销售订单项目！）。然后，稍后，如果他们尝试编辑此 'sales order item'，默认值将重新加载并恢复为 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 可能将数据插入到模式显示的每个元素中，但我不确定如何实现我的 objective?

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

非常感谢任何建议。

谢谢，克里斯

Answer 1

如果您事先知道某个项目是否正在创建或编辑，您可以 'ignore' 如果您知道该项目正在编辑，则第一个 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$ 自定义值。

在模态显示中触发 onchange 事件的问题

Issue with onchange event firing on modal show

javascript

jquery

ajax

datatables

onchange