Fire change event when programmatically update input value

Question

I have a custom select menu which updates the value of its corresponding actual select menu when you click an option.

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

The problem is, I have change events hooked onto the select menu which are not firing because the value is updated programmatically as opposed to onblur or onkeydown.

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

I've also tried using the input event but that doesn't work either.

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

Any suggestions?

This is your own select menu or plugin? Personally, I do not understand code, can you add a little more details? did you try `.trigger()`? — Griva, Jan 10 '18 at 19:27
`this` is referencing the actual `select` tag. So that line is setting the value of the actual `select`. — colmtuite, Jan 10 '18 at 19:28
Imagine I clicked a button which updated the value of a `select` tag. How can I capture that new value? The `select` doesn't know it has been updated. — colmtuite, Jan 10 '18 at 19:30
It depends what is this, most of jquery ui plugins use additional tag wrappers and if this is your own dropdown maybe you should consider adding function to set this value by input itself instead of just chaning value. This is your own dropdown ? — Griva, Jan 10 '18 at 19:34
The problem has nothing to do with the plugin. The problem occurs because change events don't fire when the value is updated programmatically. Do you understand? — colmtuite, Jan 10 '18 at 19:36
I understand it well, your problem I guess is some kind of this: https://stackoverflow.com/questions/26972088/set-a-jquery-ui-selectmenu-to-a-specific-option-by-javascript The whole point is if you use external plugin it should handle in some way case like this, if this is your own code, you have to add some method to fix it by calling `update()` or `refresh()` correct? — Griva, Jan 10 '18 at 19:40

score 1 · Accepted Answer · answered Jan 10 '18 at 19:54

It depends on your case but simple .trigger("change"); can do the job sometimes. Trigger fire DOM event on selected element so this way you can automatically call all callbacks for triggered element.

Small warning - using tigger function can cause cyclic event loop, for example if your inputA fire event change and callback also call it directly or by other following method.

I guess for your code it would be

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

Fire change event when programmatically update input value

1 Answers1