How to catch the.change event when programmatically changing the value of an element

The form has an element <input>, and next to it a bootstrap dropdown button, which writes values to this input when clicked. You need to hang the input event on change, which will be triggered when the value is changed both manually (from the keyboard) and programmatically - by a script. I have an event caught only when changing from the keyboard.

<div class="input-group">
  <div class="input-group-btn">
    <button ...>Action <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#action1">Action1</a></li>
      <li><a href="#action2">Action2</a></li>
    </ul>
  </div>
  <input type="text">
</div>

<script>
    $('form .dropdown-menu a').on('click', function() {
        var input = $(this).parents('.input-group').find('input')[0];
        input.value = this.hash.substr(1);
    });
    $('input').on('change', function() { alert(); })
</script>
Author: toxxxa, 2016-08-31
Source

1 answers

<script>
    $('form .dropdown-menu a').on('click', function() {
        var input = $(this).parents('.input-group').find('input')[0];
        input.value = this.hash.substr(1);

        // решил вот таким образом
        $('input').trigger('change');

    });
    $('input').on('change', function() { alert(); })
</script>
 2
Author: toxxxa, 2016-08-31 20:08:45