Question

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

$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');
});

有什么建议吗？

Answer 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();
});

以编程方式更新输入值时的火灾更改事件

1 个答案: