以编程方式更新输入值时触发更改事件[重复]答案

【问题标题】：Fire change event when programmatically update input value [duplicate]以编程方式更新输入值时触发更改事件[重复]
【发布时间】：2018-06-20 01:03:43
【问题描述】：

我有一个自定义选择菜单，当您单击一个选项时，它会更新其对应的实际选择菜单的值。

$listItems.click(function(e) {
  e.stopPropagation();
  $styledSelect.text($(this).text()).removeClass('active');
  $this.val($(this).attr('rel'));
  $list.hide();
});

问题是，我已将更改事件挂接到选择菜单上，这些事件未触发，因为该值是以编程方式更新的，而不是 onblur 或 onkeydown。

$(document).on('change', '.js-PropertyPaddingTop', function() {
  const value = $(this).val();
  $('.UIObject.is-selected').css('paddingTop', value + 'px');
});

我也尝试过使用input 事件，但这也不起作用。

$(document).on('input', '.js-PropertyPaddingTop', function() {
  const value = $(this).val();
  $('.UIObject.is-selected').css('paddingTop', value + 'px');
});

有什么建议吗？

【问题讨论】：

您的this 是对document 的引用？
这是您自己的选择菜单或插件？个人看不懂代码，能不能多补充一点？你试过.trigger()吗？
this 引用了实际的select 标签。所以该行正在设置实际select 的值。
想象一下，我单击了一个按钮，该按钮更新了 select 标记的值。我怎样才能捕捉到新的价值？ select 不知道它已更新。
这取决于这是什么，大多数 jquery ui 插件使用额外的标签包装器，如果这是您自己的下拉菜单，也许您应该考虑添加函数来通过输入本身设置此值，而不仅仅是更改值。这是你自己的下拉菜单？

标签： javascript jquery

【解决方案1】：

这取决于您的情况，但简单的.trigger("change"); 有时可以完成这项工作。在选定元素上触发触发 DOM 事件，这样您就可以自动调用触发元素的所有回调。

小警告 - 使用 tigger 函数可能会导致循环事件循环，例如如果您的 inputA 触发事件 change 和回调也直接调用它或通过其他以下方法调用它.

我猜你的代码应该是

$listItems.click(function(e) {
  e.stopPropagation();
  $styledSelect.text($(this).text()).removeClass('active');
  $this.val($(this).attr('rel'));
  $this.trigger("change");  // call "change" event
  $list.hide();
});

【讨论】：