Fire change event when programmatically update input value [duplicate]

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
– Griva, Commented Jan 10, 2018 at 19:27
this is referencing the actual select tag. So that line is setting the value of the actual select. — colmtuite
– colmtuite, Commented Jan 10, 2018 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
– colmtuite, Commented Jan 10, 2018 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
– Griva, Commented Jan 10, 2018 at 19:34

Griva · Accepted Answer · 2018-01-10 19:54:16Z

1

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

answered Jan 10, 2018 at 19:54

Griva

1,73821 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fire change event when programmatically update input value [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related