title: .change not triggered if change the value by js
body: <p>In my web page the value of an input is changing by a js application, but what I want is to trigger an event when a value is changed.</p>
  
  <p>The problem is that when the value is changed by the application, no event is triggered because the value is changed by js but if a value is input by the user the event is triggered.</p>
  
  <p>Here is a small example of this, when you click on the <code>change button</code>, the value is changed but the <code>.change</code> event does not trigger.</p>
  
  <p>If you manually input the values <code>.change</code> will trigger.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var i = 0;
  $("#id_st").change(function(){
    console.log('This is value',$(this).val())
    $('#p').html($(this).val());
  });
  
  $('#change_btn').click(function(){
    i = i+1;
    $("#id_st").val(i);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input id="id_st" type="text" name="st" value="0"&gt;
  &lt;br&gt;
  &lt;button id="change_btn" type="button" name="button"&gt;change value&lt;/button&gt;
  &lt;br&gt;
  &lt;p id="p"&gt;value&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I searched for my problem and found <code>.trigger('change')</code> but as I already told you that value is changed by an application which I haven't developed so can't use this method.</p>
  
  <p>Please tell me a real solution for my problem.</p>